Metodologías CSS

Una de las cosas difíciles en el desarrollo web y programación en general es el nombramiento de las cosas y el nombramiento en CSS no es diferente.

Cuando trabajas en un proyecto pequeño el nombramiento no es una prioridad pero si es una buena practica, todo cambia cuando se convierte en un proyecto grande, entonces el nombramiento se vuelve primordial, mantener el rastro de todos los selectores se vuelve un caos sin una convención de nombres, usar alguna hará la tarea fácil.

El código se volverá sencillo de leer, mantener y modificar.

¿Qué es la convención de nombres?

Una convención de nombres es un conjunto de reglas para la elección de la secuencia de caracteres que se utilice para identificadores que denoten variables, tipos, funciones y otras entidades en el código fuente y la documentación.

Algunas de las razones para utilizar esta metodología son:

• Reducir el esfuerzo para leer y entender el código fuente.
• Mejorar la claridad y apariencia del código fuente.
• Ayuda a evitar conflictos de nombres.
• Mejora la comprensión en la reutilización de código.

Ver en Wikipedia

En lenguajes de programación como JavaScript se utilizan convenciones para nombrar variables, tipos, funciones y algunos otros, dependiendo el caso de uso es el tipo de convención que se utiliza.

En CSS se utiliza kebab-case, este es una convención bastante estándar en CSS, lo podemos ver incluso en las propiedades de los selectores.

body { font-size: 16px; }

Metodologías que puedes implementar

Los siguientes son convenciones de nombres que puedes usar:

• BEM

BEM

BEM (Bloque, Elemento, Modificador) tiene un enfoque en componentes en el desarrollo web. La idea de esta metodología es separar la interfaz de usuario dentro de bloques independientes. Esto hace el desarrollo de interfaces fácil y rápido incluso con una UI compleja y permite la reutilización de código creando pequeños componentes.

Estos son los 3 problemas que esta convención de nombres trata de resolver:

1. Saber lo que hace un selector con solo mirar su nombre.
2. Tener una idea donde puede ser usado un selector con solo mirarlo.
3. Saber la relación entre los nombres de las clases con solo mirarlas.

<div class="card-post">
    <header class="card-post__header">
        <h1>Tittle Post</h1>
    </header>
    <div class="card-post__body card-post__body_hide">
        <p>Here should there some text.<p/>
    </div>
</div>

El bloque describe el propósito, el elemento compone una parte del bloque, separado con doble guión bajo __ y el modificador define la apariencia separado por un solo guión bajo _.

Sintaxis

.block__element_modifier { }

En la comunidad de BEM hay otra forma de separar el modificador con dos guiones --.

.block__element--modifier { }

Conoce más sobre BEM.

SMACSS

SMACSS (Scalable and Modular Architecture for CSS) es una guía que estructura los estilos en categorías. Es una forma de examinar el proceso de diseño y adaptarlos a un pensamiento flexible. Esta metodología trata de documentar el diseño con un enfoque coherente para el desarrollo los estilos de un sitio.

Hay 5 tipos de categorías:

1. Base
2. Layout
3. Module
4. State
5. Theme

La idea de esta metodología es dividir código en categorías. El mayor propósito es codificar patrones para su reutilización.

Conoce más sobre SMACSS.

ITCSS

ITCSS representa un triangulo invertido de CSS y la principal filosofía es ayudarte a organizar los archivos CSS del proyecto de tal manera que des un mejor trato al global name-space, la cascada y los selector específicos.

Conoce más sobre ITCSS mira como usarlo.

OOCSS

OOCSS (Object-Oriented CSS) tiene el propósito de fomentar la reutilización de código y el fácil mantenimiento de las hojas de estilos.

OCSS se centra en dos principales principios:

• Separación de la estructura de la apariencia.
• Separar el contenedor del contenido.

Conoce más sobre OOCSS.

AMCSS, SUIT CSS & ACSS

Estas tres ultimas considero que es avanzado para principiantes. Pero si tienes curiosidad puedes pasar a visitarlos AMCSS , SUIT CSS ACSS.

Fuentes

MDN