He escuchado a muchos desarrolladores decir que odian CSS. En mi experiencia, esto se debe a que no me tomé el tiempo para aprender CSS.
Coreano
알림: 한국인 독자 분들 을 위해 본 기사 는 한국어 로 번역 되었으며, 한국어 버전 은 여기 에서 보실 수 있습니다
CSS no es el "lenguaje" más bonito, pero ha impulsado con éxito el estilo de la web durante más de 20 años. No lo estoy haciendo tan mal, ¿eh?
Sin embargo, a medida que escribe más CSS, ve rápidamente una gran desventaja.
Es muy difícil mantener CSS.
CSS mal escrito se convertirá rápidamente en una pesadilla.
Aquí hay algunas convenciones de nomenclatura que le ahorrarán un poco de estrés e innumerables horas en el futuro.
Usar cadenas delimitadas por guiones
Si escribe una gran cantidad de JavaScript, escribir variables en caso de camello es una práctica común.
var redBox = document.getElementById('...')Genial, ¿verdad?
El problema es que esta forma de denominación no es adecuada para CSS.
No hagas esto:
.redBox { border: 1px solid red;}En su lugar, haz esto:
.red-box { border: 1px solid red;}Esta es una convención de nomenclatura CSS bastante estándar. Podría decirse que es más legible.
Además, es coherente con los nombres de las propiedades de CSS.
// Correct.some-class { font-weight: 10em}// Wrong.some-class { fontWeight: 10em}La convención de nombres BEM
Los equipos tienen diferentes enfoques para escribir selectores de CSS. Algunos equipos usan delimitadores de guiones, mientras que otros prefieren usar la convención de nomenclatura más estructurada llamada BEM.
Generalmente, hay 3 problemas que las convenciones de nomenclatura CSS intentan resolver:
- Para saber lo que hace un selector, con solo mirar su nombre
- Para tener una idea de dónde se puede usar un selector, con solo mirarlo
- Conocer las relaciones entre los nombres de las clases, con solo mirarlos
¿Alguna vez has visto nombres de clases escritos así:
.nav--secondary { ...}.nav__header { ...}Esa es la convención de nomenclatura de BEM.
Explicando BEM a un niño de 5 años
BEM intenta dividir la interfaz de usuario general en pequeños componentes reutilizables.
Considere la siguiente imagen:
No, no es galardonado :(
El hombre de palo representa un componente, como un bloque de diseño.
Es posible que ya haya adivinado que la B en BEM significa "Bloque".
En el mundo real, este 'bloque' podría representar la navegación del sitio, el encabezado, el pie de página o cualquier otro bloque de diseño.
Siguiendo la práctica explicada anteriormente, un nombre de clase ideal para este componente sería stick-man.
El componente debe tener este estilo:
.stick-man { }Hemos utilizado cadenas delimitadas aquí. ¡Bueno!
E de elementos
La E en 'BEM' significa Elementos.
Los bloques generales de diseño rara vez viven aislados.
Por ejemplo, el hombre-palo tiene headdos preciosos armsy feet.
El head, feety armsson todos los elementos dentro del componente. Pueden verse como componentes secundarios, es decir, secundarios del componente principal general.
Utilizando la convención de nomenclatura de BEM, los nombres de las clases de elementos se derivan agregando dos guiones bajos, seguidos del nombre del elemento.
Por ejemplo:
.stick-man__head {}.stick-man__arms {}.stick-man__feet {}M para modificadores
La M en 'BEM' significa modificadores.
¿Qué pasaría si el hombre de palo fuera modificado y pudiéramos tener un hombre de palo blueo un redhombre de palo?
En el mundo real, esto podría ser un redbotón o un bluebotón. Estas son modificaciones del componente en cuestión.
Con BEM, los nombres de las clases de modificadores se obtienen agregando dos guiones seguidos del nombre del elemento.
Por ejemplo:
.stick-man--blue {}.stick-man--red {}El último ejemplo mostró que se estaba modificando el componente principal. Este no es siempre el caso.
¿Y si tuviéramos hombres de palo de diferentes headtamaños?
Esta vez el elemento ha sido modificado. Recuerde, el elemento es un componente secundario dentro del bloque contenedor general.
El .stick-manrepresenta el Block, .stick-man__headel elemento.
Como se ve en el ejemplo anterior, los guiones dobles también se pueden usar así:
.stick-man__head--small {}.stick-man__head--big {}Nuevamente, observe el uso de guiones dobles en el ejemplo anterior. Esto se usa para denotar un modificador.
Ahora lo tienes.
Así es básicamente como funciona la convención de nomenclatura BEM.
Personalmente, tiendo a usar solo nombres de clase delimitadores de guión para proyectos simples y BEM para interfaces de usuario más involucradas.
Puede leer más sobre BEM.
BEM - Modificador de elemento de bloque
BEM - Block Element Modifier es una metodología que le ayuda a lograr componentes reutilizables y compartir código en… getbem.com
¿Por qué utilizar convenciones de nomenclatura?
Solo hay dos problemas difíciles en la informática: invalidación de caché y nombrar cosas - Phil KarltonNombrar cosas es difícil. Estamos tratando de hacer las cosas más fáciles y ahorrarnos tiempo en el futuro con un código más fácil de mantener.
Nombrar las cosas correctamente en CSS hará que su código sea más fácil de leer y mantener.
Si elige utilizar la convención de nomenclatura BEM, será más fácil ver la relación entre sus componentes / bloques de diseño con solo mirar el marcado.
¿Con mucha confianza?
Nombres CSS con enlaces JavaScript
Hoy es el primer día de trabajo de John.
Se le entrega un HTMLcódigo que se parece a esto:
John ha leído este artículo y se da cuenta de que esta puede no ser la mejor manera de nombrar las cosas CSS. Así que sigue adelante y refactoriza el código base así:
Se ve bien, ¿eh?
Sin que John lo supiera, ¿había roto el código base?
¿Cómo?
En algún lugar en el código JavaScript, hubo una relación con el nombre de la clase anterior, siteNavigation:
//the Javasript codeconst nav = document.querySelector('.siteNavigation')Entonces, con el cambio en el nombre de la clase, la navvariable se convirtió en null.
Qué triste.
Para prevenir casos como este, los desarrolladores han ideado diferentes estrategias.
1. Use nombres de clase js
Una forma de mitigar estos errores es utilizar un js-*nombre de clase para denotar una relación con el elemento DOM en cuestión.
Por ejemplo:
Y en el código JavaScript:
//the Javasript codeconst nav = document.querySelector('.js-site-navigation')Como convención, cualquiera que vea el js-site-navigationnombre de la clase comprenderá que existe una relación con ese elemento DOM en el código JavaScript.
2. Utilice el atributo Rel
Yo no uso esta técnica, pero he visto a gente hacerlo.
¿Reconoces esto?
Básicamente, el atributo rel define la relación que tiene el recurso vinculado con el documento desde el que se hace referencia.
En el ejemplo anterior con John, los defensores de esta técnica harían esto:
Y en JavaScript:
const nav = document.querySelector("[rel='js-site-navigation']")Tengo mis dudas sobre esta técnica, pero es probable que la encuentre en algunas bases de código. La afirmación aquí es, "bueno, hay una relación con Javascript, así que uso el atributo rel para denotar eso" .
La web es un lugar grande con muchos "métodos" diferentes para resolver el mismo problema.
3. No uses atributos de datos
Algunos desarrolladores utilizan atributos de datos como enlaces de JavaScript. Esto no es correcto. Por definición, los atributos de datos se utilizan para almacenar datos personalizados .
Edición n. ° 1: como lo mencionaron algunas personas increíbles en la sección de comentarios, si las personas usan el atributo 'rel', entonces quizás esté bien usar atributos de datos en ciertos casos. Después de todo, es tu decisión.
Consejo adicional: escriba más comentarios CSS
Esto no tiene nada que ver con las convenciones de nomenclatura, pero también le ahorrará algo de tiempo.
Si bien muchos desarrolladores web intentan NO escribir comentarios de JavaScript o ceñirse a unos pocos, creo que debería escribir más comentarios de CSS.
Dado que CSS no es el "lenguaje" más elegante, los comentarios bien estructurados pueden ahorrar tiempo cuando intentas comprender tu código.
No duele.
Eche un vistazo a lo bien comentado que está el código fuente de Bootstrap.
No es necesario que escriba comentarios para decir que color: redle dará un color rojo. Pero, si está utilizando un truco CSS que es menos obvio, no dude en escribir un comentario.
¿Listo para convertirte en Pro?
He creado una guía de CSS gratuita para que sus habilidades de CSS se desarrollen de inmediato. Obtenga el libro electrónico gratuito.
