Cómo optimizar CSS con las guías de estilo de código

Cuando los diseñadores hablan de guías de estilo, por lo general significan un manual acordado sobre el mirada y sentimiento coherente de un sitio web o una aplicación, con un bien diseñado esquema de color, tipografía y UI eso se usa en todo el proyecto.

También hay otro tipo de guía de estilo que podemos usar en el desarrollo web, y es igual de importante pero mucho menos discutido: Guías de estilo para el propio código.. Las guías de estilo de código son más bien para desarrolladores que para diseñadores, y su objetivo principal es optimizar CSS u otro código.

Poner en práctica las guías de estilo de código adecuadas nos proporciona una Base de código coherente, mejor organizada, mejor legibilidad del código y código más mantenible. No es una coincidencia que las principales empresas de tecnología, como Google, AirBnB o Dropbox, hagan un buen uso de ellas..

En esta publicación, veremos cómo podemos optimizar inteligentemente nuestro CSS con la ayuda de las guías de estilo de código CSS..

Código de guías de estilo frente a bibliotecas de patrones

En nuestra industria, existe un cierto grado de incertidumbre sobre lo que podemos llamar una guía de estilo.. Una lista aparte Por ejemplo, lo usa como sinónimo con el término biblioteca de patrones en este artículo, pero también podemos encontrarnos con este tipo de definición en otras publicaciones.

Por otro lado, también hay publicaciones, como CSS Tricks o el blog de Brad Frost, que distinguen las guías de estilo de código de las bibliotecas de patrones. Este último enfoque probablemente nos acerque a un sitio web bien optimizado, ya que Nos permite manejar código y diseño por separado., así que usaremos esto en este post.

Tanto las guías de estilo de código como las bibliotecas de patrones incluyen una estrategia de estilo, pero un tipo diferente. Las bibliotecas de patrones, como Bootstrap, Zurb Foundation, Global Experience Language de la BBC, o la biblioteca de patrones de MailChimp, nos proporcionan una interfaz de usuario con clases de CSS prefabricadas, tipografía, combinación de colores, a veces un sistema de cuadrícula y otros patrones de diseño..

Las guías de estilo de código CSS, como las de Evernote o ThinkUp (o las que se mencionan en la introducción) contienen reglas sobre cómo escribir CSS incluyendo cosas como convenciones de nomenclatura, estructura de archivos, orden de propiedad, formato de código, y otros.

Tenga en cuenta que los generadores de guías de estilo de vida, como KSS, Styledown o Pattern Lab, generar bibliotecas de patrones y no guías de estilo de codificación. Si bien las bibliotecas de patrones también son muy útiles y elevan el proceso de desarrollo web, no nos permiten optimizar el código en sí..

Construye tu guía de estilo de código CSS

El objetivo final de una guía de estilo de código CSS es asegurarnos de que podamos trabajar con una base de código consistente y fácilmente depurable escrita por desarrolladores que sigan las mismas reglas de estilo de código. Crear una guía de estilo de código CSS puede tomar un poco de tiempo pero vale la pena el esfuerzo, ya que solo tenemos que hacerlo una vez. Luego podemos usar la misma guía de estilo en diferentes proyectos..

Es importante tener en cuenta que las mejores guías de estilo. No solo contienen las reglas de estilo en sí, sino también los ejemplos. de buen y mal uso, ya que de esta manera los desarrolladores pueden entender las reglas de manera más intuitiva.

Por ejemplo, AirBnB muestra ejemplos buenos y malos a los desarrolladores de la siguiente manera fácil de digerir:

Estructura de archivos

Primero, necesitamos descubrir una lógica según la cual organizaremos nuestros archivos CSS. Para proyectos más pequeños, un archivo CSS puede ser suficiente, pero para proyectos más grandes es Siempre es mejor romper el código., y concatenar los archivos separados más tarde en la producción.

Algunas guías de estilo como ThinkUp's, también nos advierten sobre no usar estilos en línea o incrustados a menos que sea inevitable; También es una regla útil que vale la pena aplicar..

Anidamiento

Anidar es una gran característica en CSS, pero a veces puede salirse de control. Nadie se siente particularmente feliz, especialmente en medio de un proceso de depuración frustrante, chocando con selectores extra largos como este:

 .class_1 .class_2 # id_1 # id_2 li a span color: #bad; 

Así que siempre es bueno establecer un límite de anidación razonable, Por ejemplo, GitHub eligió tres niveles en su guía de estilo. Al limitar el anidamiento, también podemos obligarnos a escribir un código mejor estructurado.

Reglas de nombres

El uso de reglas de nomenclatura coherentes para los selectores de CSS es crucial si queremos entender nuestro código meses o incluso años después. Hay muchas soluciones por ahí, y solo hay una regla estricta que debemos seguir es decir, un nombre de selector no puede comenzar con un número.

Los cuatro estilos comunes utilizados en la denominación del selector son .minúscula, .under_scores, .dash-es, y .lowerCamelCase. Está bien elegir cualquiera de ellos, pero debemos seguir la misma lógica en todo el proyecto..

Utilizando solo nombres de selector semantico También es esencial si queremos. tener código significativo. Por ejemplo, en lugar de .botón rojo (lo que no muestra lo que hace el botón) es mejor usar el .botón de alerta nombre (que dice lo que hace), de esta manera, permitimos a los desarrolladores (y nuestro futuro ser) entender lo que dicho botón hace.

Además Si queremos cambiar su color de rojo a otra cosa en el futuro, podemos hacerlo fácilmente sin problemas.. También hay convenciones de nomenclatura de CSS prefabricadas, como la convención BEM (Bloque, Elemento, Modificador), que dar como resultado una estructura de nombres consistente con nombres únicos y significativos.

Reglas de Formato

El formato del código incluye cosas como el uso de espacios en blanco, tabulaciones, sangría, espaciado, saltos de línea, etc. No existe realmente un método universalmente bueno o malo en el formateo, la única regla general es Elija reglas coherentes que resulten en un código legible., y seguirlos a través.

Dropbox, por ejemplo, requiere que los desarrolladores pongan espacios después de los dos puntos en las declaraciones de propiedad, mientras que Evernote usa dos espacios para la sangría. Podemos configurar tantas reglas de formato como nos resulte cómodo, pero nunca más de lo que es posible captar.

Orden de declaración

Las cosas ordenadas siempre son más fáciles de ver, y ordenando declaraciones CSS (propiedades con sus valores) De acuerdo con una regla que hace que los resultados tengan sentido en un código mejor organizado.

Eche un vistazo, por ejemplo, a las reglas de ordenamiento de propiedades de WordPress, define la siguiente línea de base simple pero lógica para ordenar en qué propiedades se agrupan por su significado:

1. Monitor
2. Posicionamiento
3. Modelo de caja
4. Colores y tipografía
5. Otro

Unidades y Valores

Decidir cómo queremos usar unidades y valores no solo es importante para lograr un aspecto coherente del código, sino que si no lo hacemos, podemos terminar con algo extraño.

Solo imagina un sitio que alternativamente usa px, em, y movimiento rápido del ojo medidas de longitud. No solo se verá mal en el editor de código, pero lo más probable es que algunos elementos sean sorprendentemente pequeños o grandes en ese sitio.

También debemos tomar decisiones sobre los valores de color (hexadecimal, rgb o hsl), y si queremos usar propiedades abreviadas y de acuerdo con qué reglas. Hay una instrucción que se incluye en cada guía de estilo de código CSS que encontré, es decir,. no especifique unidades para 0 valores (realmente, simplemente no).

.clase // buen margen: 0; // margen malo: 0px; // margen malo: 0em; // margen malo: 0rem; 

Comentando

Comentar código es esencial en todos los idiomas, pero en CSS no solo facilita la depuración y la documentación, sino también las secciones de reglas CSS en grupos lógicos. Podemos usar cualquiera de los / *… * / o la //… Estilo de notación para comentarios en CSS, lo importante es permanecer consistente Con comentarios a lo largo de nuestro proyecto..

El CSS idiomático, por ejemplo, establece un sistema de comentarios significativos que incluso utiliza un poco de arte ASCII básico y da como resultado un código bellamente organizado: