¿Cuáles son las mejores prácticas para nombrar clases HTML?

Echa un vistazo a BEM – Modificador de elemento de bloque.

Por qué me gusta:

1. Se centra en la modularidad: escribe css pensando en bloques reutilizables.
2. Le ayuda a evitar colisiones de especificidad: BEM es un sistema basado en el nombre de clase, significa que todos los estilos están envueltos en clases individuales. Se recomienda evitar patrones en cascada como .class1 .class2 {} esta manera no lucharás con especificidad en la segunda iteración de tu proyecto.
3. Te obliga a crear CSS semántico: con esta convención de nomenclatura, sabes qué elemento pertenece a qué bloque con solo leer el CSS.
4. Le permite escribir un código Sass más fácil de mantener: Primero, si no está usando Sass, puede intentarlo. Luego, si lo está utilizando, cuando lo combine con BEM, estará escribiendo clases en Sass que representan un “módulo” con “nodos secundarios” y “modificadores”.

Sintaxis BEM

En pocas palabras, sigue esta estructura:

.bloquear{}
.block__element {}
.block – modificador {}

Ejemplo rápido

Supongamos que estamos construyendo una barra de navegación fija. Tendrás al menos dos reglas CSS, la barra de navegación en sí y sus elementos. Entonces, inicialmente deberían verse así:

.navbar {}
.navbar__item {}

.navbar es el bloque, y .navbar__item (lo has adivinado correctamente) es para los elementos de la barra de navegación.

En BEM, el nombre de un elemento tiene que tener como prefijo el nombre de su bloque y dos guiones bajos, por lo que si el nombre de su elemento es .item y pertenece al bloque .navbar , entonces debe nombrarlo. navbar__item

Toques finales

Imagine que desea reutilizar el aspecto y el comportamiento de la barra de navegación en una barra de navegación de pie de página, pero con algunas modificaciones, por ejemplo, otro color de fondo, otra alineación, etc.

En ese caso, escribe una clase de modificador para hacer estos pocos ajustes en la barra de navegación para transformarla en una barra de navegación de pie de página. Para nombrar una clase de modificador , use el nombre del bloque que desea modificar, en este caso .navbar , y .navbar con dos guiones y un nombre para el modificador (–footer), por lo que su nombre de clase de modificador será .navbar—footer

Finalmente, también puede agregar modificadores a un elemento, por lo que si tiene un .navbar__item , también puede crear una clase de modificador para los elementos como .navbar__item--footer

Entonces ese CSS inicial se verá así:

.navbar {
// declaraciones para la barra de navegación como ancho, alto, color de fondo …
}
.navbar__item {
// Declaraciones para el elemento como tamaño de fuente, color, altura …
}
.navbar – pie de página {
// Declaraciones para la barra de navegación, específicas para la versión de pie de página
}
.navbar__item – footer {
// Declaraciones para los elementos, específicos para la versión de pie de página
}

Aquí hay un ejemplo de Codepen para hacer esta explicación un poco más interactiva: Nav muy aburrido (Ejemplo BEM) Versión compilada

Originalmente hice este ejemplo con Slim y Sass. Si tienes curiosidad sobre estos dos idiomas, échale un vistazo: Navegación muy aburrida (ejemplo BEM)

¡Espero eso ayude! 🙂

Básicamente hay 2 enfoques principales:

• clases que se relacionan con el contenido (también conocido como clases semánticas)
• clases que se relacionan con el estilo que aplican (clases auxiliares, clases de utilidad, clases atómicas)

La denominación se relaciona con el método que decide implementar.

Para el primero, recomendaría leer sobre BEM, para el último recomendaría revisar esta cubierta de diapositivas.

Creo que hay algunas tendencias, especialmente si está utilizando un marco.

Marcos de diseño.

Si está utilizando un marco de diseño, el nombre da una idea de lo que hace la clase. Puede indicar el número de columnas en las que se extiende el objeto, o alguna variación de un estilo. Por ejemplo:

esquema btn cols-2

Pero en general creo que necesitan hacerlo.

Nombrando la función.

Por ejemplo, un texto de párrafo puede etiquetarse como “alerta” o “nota al margen”

p clase = “alerta”

Nombrando cuál es el objeto.

Se puede llamar a un menú principal:

nav class = mainMenu (Probablemente la palabra menú es un poco redundante en este caso)

Nombrar secciones.

Imaginemos que es un portal de noticias, podría tener una sección llamada mainNews y otra sección llamada relatedNews.

Evitaría clases demasiado específicas, como p = “verde” porque si por alguna razón el esquema de color necesita cambiar, tienes un desorden potencial. En este caso, es importante pensar ¿por qué era verde en primer lugar? ¿Cuál es la función de este texto verde?

Recuerde que la idea es separar el contenido del estilo, por lo que no se recomiendan estas clases para indicar el estilo directo.

Primero, obtengamos UNA COSA RECTA

No existe una clase HTML.

Hay css – clases

Hay clases php

Hay clases C

Segunda cosa:

Tenga todo el proyecto en mente y si puede usar un estilo / clase en varias páginas, entonces está yendo por el camino correcto y el resto es experiencia y práctica.

Simplicidad y aplicabilidad. No llamaría a un cuadro de texto utilizado para ingresar una “deducción” de depósito, por ejemplo. La lectura del código debe explicarse lo más posible, por lo que un cuadro de texto con una clase obligatoria le indica que es uno de los cuadros de texto que deben completarse. O la clase podría ser “verde”, y su CSS establece el color de todos los artículos de la clase verde a verde.