Entendiendo las metodologías de escritura CSS

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

Una metodologia es un sistema de metodos. Piense en un método como simplemente una forma de hacer algo de una manera sistemática, en una forma predeterminada 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 es mas eficiente.

Metodología CSS

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

Nuestros métodos preferidos han sido establecidos por nuestra cuenta a lo largo del 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 mas Flexible, definido, reutilizable, comprensible. y manejable.

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

1. OOCSS (Object Oriented CSS)
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 es solo sobre las metodologías para escribir CSS..

1. OOCSS

Desarrollado por Nicole Sullivan en 2008, los conceptos clave de OOCSS (Object Oriented CSS) incluyen CSS objeto Identificación, separación de estructuras y estilos visuales, y evitar 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" de CSS es un patrón visual repetitivo, que puede resumirse en un fragmento independiente de HTML, CSS y posiblemente JavaScript. Ese objeto puede ser reutilizado a través de 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 independientes:

Aquí tenemos dos tipos de objetos, una vista previa más grande de títulos que nombraremos post-preview-primary y una barra lateral con títulos que nombraremos. post-preview-secundario.

Necesitamos que estructura separada y piel (es decir, estilos que crean la apariencia de los objetos). Los dos tipos de objetos tienen estructuras diferentes, uno está en una caja más grande aunque se parecen, con imágenes a la izquierda y títulos a la derecha.

Demos una clase a las imágenes de ambos objetos. post-preview-image y agrega el código que pone 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 para ellos.

La separación de la piel también se puede hacer para estilos más simples como fronteras o fondos. Si tienes varios objetos con el mismo borde azul, creando una clase separada para el borde azul y añadiéndolo a los objetos reducir el número de veces que los bordes azules tienen que ser codificados en CSS.

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

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

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

2. BEM

Desarrollado por desarrolladores en Yandex en 2009, los conceptos clave para BEM (Bloque, Elemento, Modificador) incluyen la identificación de bloquear, elemento Y modificador y nombrándolos en consecuencia.

UNA “bloquear” es esencialmente lo mismo que un “objeto”(del ejemplo anterior), un “elemento” se refiere a los componentes del bloque (imagen, título, vista previa del texto en la parte superior) vista previa de post- objetos). UNA “modificador” se puede utilizar cuando cambia el estado de un bloque o elemento, por ejemplo, cuando agrega una clase activa a un elemento del 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á la clase menú
• sus artículos tendrán la clase opción del menú (el bloque y el elemento están separados por doble guión bajo)
• El modificador para el estado deshabilitado del menú puede tener la clase. menu_disabled (modificador delimitado por un solo guión bajo)
• modificador para el estado deshabilitado de un elemento de menú puede ser menu__item_disabled.

Para modificadores, también podemos usar valor clave Formato para nombrar. Por ejemplo, para distinguir cualquier elemento de menú que se vincule a artículos obsoletos, podemos darles la clase menu__item_status_obsolete, y para el estilo de cualquier elemento del menú que apunta a documentos pendientes, el nombre de la clase puede ser menu__item_status_pending.

El nombre puede ser modificado para lo que funciona para usted. La idea es poder Identificar, bloques, elementos y modificadores a partir de los nombres de clase.. Echa un vistazo a algunos de los sistemas de nombres que figuran en el sitio BEM.

El sitio de BEM también enumera cómo la segregación de bloques, elementos y modificadores también puede incorporarse al sistema de archivos CSS. Los bloques como “botones” y “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 de apariencia sensata, BEM aconseja que mantengamos el bloque para anidar el elemento poco profundo.

3. ACSS

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

Es difícil determinar cuándo se desarrolló ACSS (Atomic CSS) por primera vez, ya que el concepto ha estado en uso por un tiempo. Los desarrolladores han estado usando clases como .clearfix desbordamiento: oculto por mucho tiempo. La idea en ACSS es tener una clase para casi todos los pares de propiedad-valor relacionados no relacionados con contenido reutilizables lo 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 utilizan en HTML.

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

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

Pros de ACSS:Styling 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 al identificar los 5 tipos diferentes de reglas de estilo. Los nombres de clase 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 que se usan para definir el diseño de la página, como la codificación donde 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 utiliza para cambiar el esquema visual de la página..

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

Pros de SMACSS:Código mejor organizado.

Contras de SMACSS: Ninguna que se me ocurra.

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

Conclusión

Las metodologías CSS anteriores le darán un sistema para Gestiona y optimiza tus 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 como:

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