Las etiquetas de clase en CSS nos permiten referenciar y agrupar elementos para editar sus propiedades usando el selector de clase. En este post te enseñaremos cómo nombrar estas etiquetas para estructurar clases en CSS.
¿Por qué aprender a estructurar clases en CSS?
Cuando hablamos de estructurar clases en CSS nos referimos a nombrar los selectores y las etiquetas de clase de un modo que nos facilite el proceso de colaboración y diseño. Aunque puede parecer poco útil para páginas web pequeñas con pocos elementos, es una buena idea crear el hábito de catalogar nuestros elementos para cuando llegue el momento de trabajar en páginas web más complejas.
Estructurar clases en CSS también sirve para los trabajos en equipo. Nombrar tus elementos acorde a sus características y funciones les permite a los demás integrantes de tu equipo saber qué elementos están editando y qué deben hacer con ellos. Por ejemplo, nombrar un botón que debe ser rojo como «btn–red» le permite al diseñador identificar a qué elemento debe añadir la propiedad de color y añadirla rápidamente usando su selector de clase.
En resumen, estructurar clases en CSS es una forma eficiente de escribir y editar nuestro código. Existen varias metodologías que para crear esta eficiencia, a continuación te presentamos las más populares.
BEM
La metodología BEM o Block, Element, Modifier es una forma de nombrar clases muy popular en HTML y CSS. Sus siglas hacen alusión a cómo funciona su lógica.
- El block se refiere a un elemento padre o la versión más importante de un elemento. Estos se expresan con una abreviatura del elemento (.navbar)
- Los elementos hijos son los element, y son aquellos que dependen del block y pueden encontrarse dentro del mimso. Este se expresa con guion bajo después del nombre del elemento padre (.navbar_text)
- El modifier se refiere a las propiedades que manipulan el block, lo que le da un estilo particular al elemento. Estas propiedades se expresan con dos guiones después del elemento padre (.navbar–black).
Esta metodología nos permite saber rápidamente qué elementos dependen de otros y qué propiedades ya se están usando o ya tienen una clase definida. En este post, puedes leer más acerca de las ventajas y desventajas de la metodología BEM.
OOCSS
Las siglas OOCSS son una abreviatura de la frase «Object oriented CSS«. Esta metodología apoya la reutilización de etiquetas de clase para identificar ciertos elementos y hacer que nuestras hojas de estilo sean más fáciles de mantener y modificar. OOCSS pretende estructurar clases en CSS con base a dos principios:
Separar la estructura de lo visual
OOCSS separa las características estructurales de las características visuales en un elemento. Esta separación ayuda a entender las características visuales de los elementos (color, sombra, borde, etc.) como propiedades ajenas a los elementos en sí (botones, cajas, barras). Al crear esta separación, OOCSS entiende las características visuales como propiedades que se pueden repetir entre elementos con diferentes estructuras y, por ende, pueden formar parte de un mismo conjunto.
Al crear una sola clase .skin con las características visuales que comparten distintos elementos, evitamos la repetición de dichas características en cada elemento. Basta con poner la clase .skin en los elementos para aplicar en ellos múltiples propiedades, haciendo que el código sea más eficiente y legible.
Separar el contenedor del contenido
Similar al principio anterior, la idea detrás de separar el contenedor del contenido en OOCSS es hacer que los estilos agregados a un elemento no sean dependientes de su contenedor. Es decir, nos sugieren no agregar estilos dependientes a una ubicación (h1, footer), sino agregar clases a estos elementos que contengan los estilos. Esto se basa en páginas web a gran escala que necesitarán hacer cambios a los contenedores sin afectar su contenido.
En este artículo, puedes aprender más acerca de la metodología OOCSS.
Atomic
Esta metodología para estructurar clases en CSS la creó Thierry Koblenz y se basa en su teoría de que la forma más legible y eficiente de crear hojas de estilo en CSS es crear una clase para cada estilo que queramos usar. Esto permite que agreguemos clases a los elementos como si fueran propiedades y evita que las propiedades sean dependientes del elemento. A diferencia de las anteriores metodologías, no hay un orden para los nombres de las clases, simplemente deben referirse a las propiedades que contienen.
SMACSS
SMACSS (Scalable and Modular Architecture for CSS), más que una metodología para estructurar clases en CSS, es una metodología para organizar archivos. SMACSS está conformada por cinco categorías:
Base
Esta categoría contiene la tipografía por defecto y los estilos generales. Contiene aquello que se aplica a la página web en general.
Layout
Esta categoría divide la página en secciones, creando y uniendo módulos. En esta categoría pueden estar cabeceras, cuerpo y pie de página, que podemos identificar usando la etiqueta ID.
Module
Esta categoría contiene toda propiedad que sea reutilizable. Como te hemos explicado en OOCSS, hay propiedades que se repiten en varios elementos. Al igual que la metodología orientada a objetos, SMACSS define un espacio para organizar estas propiedades y reutilizarlas.
State
Esta categoría determina cómo se ven los elementos modulares en determinado momento, es decir, determina su estado en un momento en particular. Esto puede suceder con barras de navegación que cambian de color cuando hay un cursor encima o los menú de hamburguesa en su estado cerrado vs abierto.
¿Cuál es el siguiente paso?
Ahora que sabes cómo estructurar clases en CSS usando distintos modelos, es hora de poner en práctica tus nuevos conocimientos en tu propia página web. Te recomendamos nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp, donde aprenderás mucho más sobre CSS y crearás tu propio sitio web desde cero con ayuda de nuestros profesores. ¡Anímate a inscribirte!
