Comprender las metodologías de escritura de CSS

En esta publicación vamos a ver qué son las metodologías de escritura CSS, algunas metodologías bien conocidas y cómo pueden ser útiles para nosotros al optimizar nuestro código CSS. Comencemos con la pregunta más simple para hacer rodar la pelota. ¿Qué es una metodología?

Una metodología es un sistema de métodos . Piense en un método como simplemente una forma de hacer algo de manera sistemática, en una determinada forma preestablecida de hacer las cosas para lograr el resultado que queremos.

Para obtener mejores resultados, mejoramos nuestros métodos planificándolos mejor, cambiando el orden, simplificando los pasos, lo que sea que funcione más rápido y sea más eficiente .

Metodología CSS

Ahora hablemos de la metodología CSS. Al igual que con casi todo en la vida, también tenemos un método para escribir CSS: algunos restauran el CSS primero, algunos estilos de diseño del lugar duran, algunos comienzan con dos o tres clases para diseñar un elemento, algunos escriben todos los códigos CSS en un solo archivo.

Nuestros métodos preferidos han sido establecidos por nuestra cuenta con el tiempo o influenciados por otros o requeridos en nuestro lugar de trabajo o debido a todo lo anterior. Pero con el tiempo, los veteranos de CSS han formulado metodologías para escribir CSS que son más flexibles, definidos, reutilizables, comprensibles y manejables .

Vamos a ver esas metodologías formuladas, que incluirán:

1. OOCSS (CSS orientado a objetos)
2. BEM (Bloque, Elemento, Modificador)
3. ACSS (CSS atómico)
4. SMACSS (Arquitectura escalable y modular para CSS)

Nota : Ninguno de los conceptos mencionados a continuación debe confundirse con ningún marco, biblioteca o herramienta que pueda tener el mismo nombre y concepto que estas metodologías. Esta publicación trata solo sobre las metodologías para escribir CSS.

1. OOCSS

Desarrollado por Nicole Sullivan en 2008, los conceptos clave de OOCSS (CSS orientado a objetos) incluyen la identificación de objetos CSS, la separación de la estructura y los estilos visuales, y evitan los estilos basados ​​en la ubicación.

En OOCSS, el primer paso que Nicole propone que hagamos es identificar objetos en CSS .

"Básicamente, un" objeto "CSS es un patrón visual repetitivo, que puede abstraerse en un fragmento independiente de HTML, CSS y posiblemente JavaScript. Ese objeto puede ser reutilizado en un sitio. - Nicole Sullivan, Github (OOCSS) "

Tomemos por ejemplo esta estructura de este sitio. Aquí hay algo que es un patrón visual repetitivo y tiene su propio HTML y / o CSS independiente:

Tenemos aquí dos tipos de objetos, una vista previa más grande de títulos a los que llamaremos post-preview-primary y una barra lateral con títulos que llamaremos post-preview-secondary .

Necesitamos separar la estructura y la piel (es decir, estilos que crean la apariencia de los objetos). Los dos tipos de objetos tienen estructuras diferentes, uno se encuentra en un cuadro más grande aunque parezcan similares, con imágenes a la izquierda y títulos a la derecha.

Vamos a dar a las imágenes de ambos objetos una clase post-preview-image y agreguemos el código que coloca la imagen a la izquierda. Esto nos impide tener que repetir el código de dónde colocar la imagen dentro de los objetos en CSS. Si hay otros objetos similares, reutilizamos post-preview-image de post-preview-image para ellos.

La separación de la piel también se puede hacer para estilos más simples como bordes o fondos . Si tiene varios objetos con el mismo borde azul, la creación de una clase separada para el borde azul y su adición a los objetos reducirá el número de veces que los bordes azules deben codificarse en CSS.

Nicole también sugiere que no se agreguen estilos basados ​​en la ubicación, por ejemplo, en lugar de apuntar a todos los enlaces dentro de un div en particular para resaltar, dales a esos enlaces una clase de resaltado con los estilos de CSS apropiados. De esta manera, cuando necesite resaltar un enlace en alguna otra parte de la página, puede reutilizar la clase de resaltador.

Pros de OOCSS : códigos de estilo visual reutilizables, códigos flexibles de ubicación, reducción en selectores anidados profundos.

Contras de OOCSS : Sin una buena cantidad de patrones visuales repetitivos, la estructura de separación y los códigos de estilo visual parecen innecesarios.

2. BEM

Desarrollado por los desarrolladores en Yandex en 2009, los conceptos clave para BEM (Bloque, Elemento, Modificador) abarcan la identificación de bloque, elemento y modificador y su nombramiento en consecuencia.

Un "bloque" es esencialmente lo mismo que un "objeto" (del ejemplo anterior), un "elemento" se refiere a los componentes del bloque (imagen, título, texto de vista previa en la preview-post- objetos). Se puede usar un "modificador" cuando el estado de un bloque o elemento cambia, por ejemplo, cuando agrega una clase activa a un elemento de menú para resaltarlo, la clase activa actúa como su modificador.

Una vez que haya identificado los componentes, nómbrelos en consecuencia. Por ejemplo:

• un bloque de menú tendrá el menu clase
• sus elementos tendrán el menu__item (bloque y elemento están separados por doble guion bajo)
• el modificador para el estado desactivado del menú puede tener la clase menu_disabled (modificador delimitado por un único guión bajo)
• el modificador para el estado desactivado de un elemento de menú puede ser menu__item_disabled .

Para los modificadores, también podemos usar el formato key_value para nombrar. Por ejemplo, para distinguir los elementos de menú que enlazan con artículos obsoletos, podemos darles el menu__item_status_obsolete, y para diseñar cualquier elemento de menú que apunte a documentos pendientes, el nombre de clase puede ser menu__item_status_pending .

La denominación puede modificarse para que funcione para usted. La idea es poder identificar, bloques, elementos y modificadores de los nombres de las clases . Vea algunos de los sistemas de nombres listados en el sitio BEM.

El sitio de BEM también enumera cómo la segregación de bloque, elemento y modificador también se puede incorporar al sistema de archivos CSS . Los bloques como "botones" e "entradas" pueden tener sus propias carpetas que consisten en los archivos (.css, .js) que están asociados con esos bloques, lo que facilita las cosas cuando queremos importar esos bloques en otros proyectos.

Ventajas de BEM: nombres de clase fáciles de usar y reducción en selectores CSS profundos.

Contras de BEM: para mantener los nombres con apariencia de cordura, BEM aconseja que mantengamos la obstrucción de bloque a elemento superficial.

3. ACSS

Hecho famoso por Yahoo, en algún lugar cerca del final de la primera década del siglo 21, los conceptos clave de ACSS consisten en crear clases para el nivel de estilo más atómico, es decir, un par de valor de propiedad, y luego usarlas en HTML según sea necesario.

Es difícil determinar cuándo se desarrolló por primera vez el ACSS (CSS atómico), ya que el concepto ha estado en uso desde hace un tiempo. Los desarrolladores han estado usando clases como .clearfix{overflow: hidden} durante mucho tiempo. La idea en ACSS es tener una clase para prácticamente todo par de valor de propiedad no relacionado con contenido reutilizable que necesitaremos en nuestro sitio, y agregar esas clases cuando sea necesario a los elementos HTML.

A continuación se muestra un ejemplo de clases basadas en ACSS y cómo se usan en HTML.

 .mr-8 {margin-right: 8px;} .fl-r {float: right;} 

Como puede ver, el número de clases aumentará con este método y el HTML estará saturado por todas esas clases. Este método no es 100% efectivo, pero puede ser útil si se desea. Yahoo usa esto después de todo.

Ventajas de ACSS: diseñar HTML sin dejar HTML.

Contras de ACSS: Demasiadas clases, no muy ordenadas y puede que lo odies.

4. SMACSS

Desarrollado en 2011 por Jonathan Snook SMACSS (Arquitectura escalable y modular para CSS) funciona identificando los 5 diferentes tipos de reglas de estilo. Los nombres de las clases y el sistema de archivo se crean en base a estos.

"SMACSS es una forma de examinar su proceso de diseño y como una forma de ajustar esos marcos rígidos en un proceso de pensamiento flexible. - Jonathan Snook "

SMACSS identifica 5 tipos de reglas de estilo, a saber , base, diseño, módulo, estado y tema .

• Los estilos base son los estilos predeterminados dirigidos a las etiquetas HTML básicas, como

  , .

• Los estilos de diseño son estilos utilizados para definir el diseño de la página, como la codificación a la que irán los menús de encabezado, pie de página y laterales.
• Los estilos de módulo son específicos de un módulo como galería o presentación de diapositivas.
• Los estilos de estado son para resaltar elementos con estados modificables como ocultos o deshabilitados.
• El tema se usa para cambiar el esquema visual de la página.

Las diferentes reglas de estilo se pueden identificar usando un prefijo en el nombre de la clase, por ejemplo, l-header (para el diseño) o t-header (para el tema). También podemos organizar estos diferentes tipos de reglas colocándolas en archivos y carpetas separados.

Pros de SMACSS: código mejor organizado.

Contras de SMACSS : ninguno en que pueda pensar.

Hay un libro en línea gratuito que puede leer sobre SMACSS, o puede comprar su versión de libro electrónico para estudiarlo más.

Conclusión

Las metodologías anteriores de CSS le proporcionarán un sistema para administrar y optimizar sus códigos CSS . Se pueden combinar juntos, como OOCSS-SMACSS, OOCSS-BEM o BEM-SAMCSS para satisfacer sus necesidades.

También hay marcos y bibliotecas si desea un sistema automatizado para ejecutar metodologías CSS tales como:

• Marco OOCSS
• Herramientas BEM
• Marco orgánico de CSS (sigue el concepto atómico).