OmbuShop Crea Tu Tienda Online

Convenciones para los atributos Class

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

¿Por qué buscar una convención para el nombramiento de clases? Llegar a un acuerdo para la creación de nombres de clase facilitará el trabajo en equipo y la lectura del código. Veremos algunos ejemplos de convenciones existentes.

En el universo de la programación tenemos algunas pocas convenciones en cuanto al nombre que aplicamos a constantes, variables, modelos, instancias y métodos. Si bien no es técnicamente necesario seguirlas, ayudan mucho a los artesanos del código fuente.

El tiempo demostró que vale la pena dejar de lado caprichos o gustos individuales y consensuar, entre todos, una opción estándar. De esta forma, podemos identificar si un objeto es una variable o una constante con sólo ver su nombres.

Ahora bien, ¿cuál es la situación actual en el universo front-end? ¿Qué pasa con las clases en los elementos del HTML y sus respectivos selectores desde CSS? No parece haber muchos profesionales siguiendo un único estándar extendido, pero las convenciones existen. Veamos…

Un camino intuitivo: método modular

Como sabemos, es conveniente evitar la creación de selectores largos en el archivo CSS, por lo que explicitar en el nombre de la clase la relación de parentezco puede ser una buena idea. Usaremos, entonces, las clases de forma inteligente, evitando usar selectores con descendencia siempre que se pueda.

Una posibilidad puede ser explicitar al parent y luego el child, encadenados por un guión. Explicitar los conjuntos de elementos con el patrón plural, singular, los modificadores como adjetivos luego del elemento (también separados por guión) y los estados de forma similar.

No estamos siendo técnicamente descriptivos de las relaciones entre elementos, pero el código es muy amigable para ser leído por humanos. Ejemplificamos aquí los casos con código:


/* Convención modular para clases de CSS */

/* Descendencia: */
.parent { }
.parent-child { }
/* e.g. */
.modal { }
.modal-header { }

/* Grupos de objetos: plural > singular */
.objects { }
.object { }

/* Modificadores: se aplican dos clases al mismo elemento */
.object.big { }
.object.small { }

/* Estado de objetos: se aplican con el verbo “is”, en inglés */
.object.is-open { }
.object.is-closed { }

/*
Basado en artículo:
http://thesassway.com/advanced/modular-css-naming-conventions
*/

See the Pen DBEip by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Más información sobre el método modular en este artículo.

Un camino más complejo y descriptivo: BEM

BEM significa Block-Element-Modifier, e implica el uso de un formato específico y muy técnico para las clases de los objetos. Su formato unívoco le indica al desarrollador si se trata de un bloque (que contendrá elementos en su interior), un elemento o un modificador de algún elemento. Para separar bloques de sus respectivos elementos se utiliza la combinación de dos guiones bajos, y para indicar la existencia de un modificador se recurre a dos guiones medios.

Tanto el código HTML como los selectores de CSS se complejizan, pero tenemos ahora la seguridad de estar utilizando una forma unívoca de nombrar a los elementos en sus distintas situaciones.

Veremos cómo es esto, con casos reales:


/* Convención BEM para clases de CSS */

/* Blocks */
.block { }

/* Elements */
.block__element { }

/* Modifiers */
.block__element–modifier { }

/* Algunos ejemplos */
.modal { }
.modal__header { }
.modal__header–error { }
.modal__content { }
.modal__buttons__button–default { }
.modal–alert__content { }

/*
Basado en artículo:
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
*/

See the Pen Convención BEM para clases de CSS by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Más información sobre BEM aquí.

Algunas de las críticas más fuertes a BEM es que genera un paisaje poco convencional en el código HTML y CSS, algo que puede dificultar un poco su lectura.

¡A probar y seguir experimentando en tu próxima tienda online!