Para el nombramiento de clases se utiliza BEM (Bloque, elemento, modificador) en combinación de prefijos que ayudan a identificar el rol del elemento en todo el sitio.
Se siguen los lineamientos de diseño atómico (Atomic design) y la estructura basada en https://github.com/anareyna/atomic-starter
- e (elemento)
Puede ser un botón, un input, un encabezado. Se repite potencialmente en todo el sitio, no puede dividirse y por lo general se asocia a un tag HTML (button, input, a)
- c (componente)
Se combinan elementos para formar componentes que tienen su propia funcionalidad y pueden ser reutilizables en otras partes del sitio. Ejm: Un widget, Una barra de navegación, Un buscador.
- s (section)
Sirven para formar estructuras que pueden combinar elementos y componentes. Separan secciones de una interfaz. Ejm: Un header, un footer, una seccion de blog, etc.
- p (página)
Para estilos específicos de páginas. Por lo general debe evitarse su uso. Debe declarse en la etiqueta
body.
- u (utilitario)
Deben estar definidos en su propia hoja de estilos. Son las únicas clases que pueden contener la palabra clave
!importantpara sobreescribir cualquier otro estilo de ser necesario. Una vez definida la clase utilitaria no debe ser cambiada para evitar comportamientos extraños en el sitio.
- js (javascript)
Los elementos que deben enlazarse a alguna funcionalidad con javascript deben tener una clase especial para no afectar a futuros cambios en la estructura html o css del sitio.
- La separación de palabras compuestas se hace con un guión (-)
Ejm. .c-widget-dashboard - La separación de bloque y elemento con dos guiones bajos (__)
Ejm. .c-nav__link - La separación de modificador con dos guiones (--)
Ejm. .e-btn .e-btn--small
.e-btn, .e-btn--large
.c-nav, .c-nav__link
.s-header
.p-home
.u-hidden, .u-text-center
.js-modal
Los elementos deben estar al último nivel (no ser contenedores de otros elementos html)
div.c-message
span.c-message__icon // No es contenedor (Último nivel) por eso tiene elemento __icon
h3.c-message__text
div.c-login
header.c-login-header // Contiene a h1 por eso no tiene elemento en su nombre
h1.c-login__title Bienvenido
- Evitar indentaciones innecesarias
- Separar los media queries en diferentes secciones
- Escribir el nombre completo de las clases en BEM (evitar la referencia al padre con &), esto facilita la búsqueda de clases al momento de depuración de estilos.
// incorrecto
.s-header
color black
&__title
color blue
// correcto
.s-header
color black
.s-header__title
color blue