Si ya tienes algo de experiencia con CSS, sabrás que es un lenguaje aparentemente sencillo, pero que se vuelve complejo en grandes proyectos. Si no contamos con una buena organización, nos encontraremos con grandes archivos, reglas repetidas, mal uso de
!important. Vamos, una chapuza.Para evitar este tipo de situaciones, tenemos las metodologías CSS, que no son más sistemas preestablecidos, formales y bien documentados, que te ayudan a escribir y organizar código CSS mantenible y escalable. Por ejemplo, suelen apostar por el desarrollo de pequeños y aislados módulos, en lugar de un gran archivo de código indivisible (el típico style.css de miles de líneas que contiene TODOS los estilos del sitio web. ¿Quién puede mantener algo así de forma eficiente?).
Por todo esto, vamos a hacer un repaso de las metodologías CSS más extendidas a día hoy:
- SMACSS
- BEM
- ITCSS
- OOCSS
- Atomic CSS
SMACSS (Scalable and Modular Architecture for CSS)
Definido por Jonathan Snook en su libro Scalable and Modular Architecture for CSS, en 2011.El objetivo principal de esta metodología es reducir la cantidad de código y simplificar el mantenimiento. Para ello, se dividen los estilos en cinco partes:
- Reglas básicas: se establecen los estilos por defectos de los elementos HTML individuales, los típicos selectores CSS de tipo. Por ejemplo,
reset,html,body,button,h1, etc. - Reglas del layout: se divide la página en secciones (
header,main content,footer,navigation, etc.) y se asignan los estilos relacionados con su estructura. - Reglas de módulos: elementos que pueden ser reusables, modulares e independientes del contexto. Por ejemplo: llamadas a la acción o galerías de imágenes.
- Reglas de estados: se define el comportamiento del layout y sus módulos en diferentes estados:
hover,active, diferentes resoluciones, etc.). - Reglas de temas: estilos que afectan al layout y módulos. Estas reglas son opcionales, y las puedes utilizar para estilos que puede que quieras reemplazar (normalmente se utiliza en sitios web que cuentan con varios temas, por ejemplo, uno oscuro y uno claro).
BEM (Block, Element, Modifier)
Es un sistema sencillo de nomenclatura que permite que el código sea más sencillo de leer y comprender. Ofrece un terreno común para los desarrolladores que trabajan en un mismo proyecto.Establece tres tipos de componentes para su nomenclatura:
- Bloque: componente independiente que tiene significado por sí mismo, es decir, un módulo (por ejemplo, un menú).
- Elemento: es una parte del bloque que no tiene sentido por sí mismo, o dicho de otro modo, que depende del bloque. Por ejemplo, podrían ser elementos las imágenes de un slider o los elementos de un menú.
- Modificador: se utiliza para cambiar la apariencia o estado de un elemento (
hover,active,disabled,fixed, etc.).
.bloque {}
.bloque__elemento {}
.bloque--modificador {}
.bloque__elemento--modificador {}Si quieres ampliar información, visita la web GetBEM.
ITCSS (Inverted Triangle CSS)
ITCSS es una arquitectura que tiene como principal objetivo estructurar la forma en la que escribimos CSS.Para ello, se propone organizar la estructura del proyecto para poder visualizarlo como un triángulo invertido, como en la siguiente imagen:
Por lo tanto, contaría con las siguientes carpetas:
- Settings: contiene la configuración global del proyecto (fuentes, paletas de colores, etc.).
- Tools: mixins y funciones que se utilizan a nivel global.
- Generic: estilos de alto nivel y gran alcance (normalización de estilos, reset, definición de tamaños de elementos, etc.).
- Elements: estilos de los elementos HTML base, sin ningún tipo de clase o id (es decir,
button,p,h1, etc.). - Object: primera capa de estilos, con los selectores de clase. También se incluyen algunos media queries más genéricos.
- Components: estilos de elementos reconocibles en la interfaz. Aquí va la mayor parte del trabajo, y probablemente sea la carpeta que contenga más archivos, ya que cada pequeño elemento de la web deberá tener definidos sus estilos en un archivo individual.
- Utilities: utilizado para anular estilos que se hayan utilizado antes, porque se quiera sobreescribir para algún elemento concreto. El único sitio en el que debemos utilizar
!important.
Puede ser utilizado con y sin preprocesadores, y es compatible con otras metodologías ya vistas como BEM y SMACSS.
OOCSS (Object-Oriented CSS)
Establece un estándar para escribir código CSS orientado a objetos, basándose en dos ideas principales:- Separar la estructura del diseño.
- Separar el contenedos del contenido.
Aunque es de las primeras metodologías (nació en 2009), todavía es muy utilizada a día hoy.
A través de OOCSS, los estilos se escriben únicamente utilizando selectores de clase de CSS, de ahí que sea tan reutilizable.
Por ejemplo, si queremos dar estilos a un botón, deberíamos establecer las siguientes clases:
.button: establece la estructura básica, común a todos los botones..blue-big: estilos para el tamaño del botón.
Más información.
Atomic CSS
Con Atomic CSS se establecen clases reusables de un único propósito, con nombres basados en sus funciones visuales. En este caso, se escribe el CSS independientemente del contexto o contenido.Gracias a la reutilización de clases se minimiza la cantidad de código, lo que permite también realizar cambios de forma relativamente fácil.
Ejemplos de usos podrían ser:
.fixed { position: fixed }
.p15 { padding: 15px }
.mb10 { margin-bottom: 10px }
.c-orange { color: orange }Conclusiones
Aunque existen más metodologías como SUIT CSS, MCSS y AMCSS, en este artículo hemos hecho un repaso de las que consideramos más destacadas.Cada una tiene sus ventajas e inconvenientes, y encontrar la ideal no es fácil, ya que depende mucho del tipo de proyecto. No existe una fórmula perfecta, ni debes tomar estas reglas como algo muy estricto, así que feel free de adaptarlas a tu forma de trabajar, o crear la tuyas propias.
De todas formas, espero que este artículo te haya resultado de utilidad. Recuerda que para cualquier duda o sugerencia puedes contactar con nosotros a través de nuestro formulario de contacto y redes sociales.
0 Comentarios