Metodología para organizar tu código CSS.

1. Metodología para mantener baja la especificidad CSS.
BEM
Block Element Modifier
| Marco Giacomuzzi

2. Organización y buenas prácticas
Velocidad en la escritura del código.
Menos código a escribir.
Optimización en la velocidad de carga.
| Marco Giacomuzzi

3. Otras metodologías
OOCSS: separación del contenedor y contenido a través de “objetos” CSS.
SMACSS: organización de las reglas CSS en 5 categorías (base, maquetación, módulo, estado y tema).
SIUTCSS: las reglas CSS son formadas por un conjunto de convenciones de nomenclatura.
Atomic: fragmenta los estilos en pequeños átomos, en pequeñas piezas indivisibles.
| Marco Giacomuzzi

4. Por qué BEM
Es la menos compleja y ofrece una buena arquitectura
de componentes con una terminología semántica.
| Marco Giacomuzzi

5. Bloques, Elementos y Modificadores
Bloque: Elemento autónomo: header, container, navbar, list, input, etc.
Elemento: Es parte de un bloque y semánticamente ligado a su bloque: header title, navbar item, etc.
Modificador: Indicador que cambia la apariencia o el comportamiento del bloque o elemento.
| Marco Giacomuzzi

6. | Marco Giacomuzzi

7. Regla de nomenclatura: block--modificar-value
HTML
<button class="btn">
Botón normal
</button>
<button class="btn btn--state-success">
Botón de éxito
</button>
<button class="btn btn--state-danger">
Botón de error
</button>
CSS
.btn {
border: 1px solid #ddd;
border-radius: 4px;
padding: .6rem 1rem;
background-color: #eee;
color: #333;
font-family: Helvetica, sans-serif;
font-size: .85rem;
font-weight: bold;
}
.btn--state-success {
border-color: lighten(green, 3%);
background-color: lighten(green, 8%);
color: #fff;
}
.btn--state-danger {
border-color: lighten(red, 3%);
background-color: lighten(red, 8%);
color: #fff;
}
| Marco Giacomuzzi

8. Beneficios
Modularidad: Independencia de uso, transferibilidad, herencia de estilos.
Reusabilidad: Reutilización inteligente de los bloques con un esfuerzo mínimo de estilos.
Estructura: CSS con una estructura sana, simple y fácil de entender.
| Marco Giacomuzzi

9. Nomenclatura
Un solo código, un mismo idioma:
estructura y convenciones en la nomenclatura.
| Marco Giacomuzzi

10. Bloque
Los nombres de los bloques pueden ser formado por letra, números y guiones.
Para formar una clase CSS, asignamos un prefijo para el espacio de nombres: .block.
HTML
<div class="block">...</div>
CSS
.block { color: #000 }
| Marco Giacomuzzi

11. Elemento
Los nombres de los bloques pueden ser formado por letra, números, guiones y guiones bajos.
El nombre de la clase está formada por el nombre del bloque más dos guiones bajos más el nombre del
elemento: .block__element .
HTML
<div class="block">
<span class="block__element">
...
</span>
</div>
CSS correcto
.block__element { color: #000 }
CSS incorrecto
.block .block__element { color: #000 }
div.block__element { color: #000 }
| Marco Giacomuzzi

12. Modificador
El nombre de la clase está formada por el nombre del bloque o del elemento más dos guiones: .block--modifier o
.block__element--modifier y .block--state-success con .block--state-danger. En caso de modificadores
complejos se usan los guiones.
HTML correcto
<div class="block block--modifier">...</div>
<div class="block block--size-big block--shadow-yes">...</div>
HTML incorrecto
<div class="block--modifier">...</div>
| Marco Giacomuzzi

13. Modificador
CSS
Usar el nombre del modificador para crear un selector de clase:
.block--hidden { ... }
Para modificar elementos basados en el modificador del bloque:
.block--modifier .block__element { ... }
Modificar un elemento:
.block__elemento--modifier { ... }
| Marco Giacomuzzi

14. HTML
<form class="form form--theme-dark form--search”>
<label for="search" class="form__label">
Buscar en Campus
</label>
<input type="search" id="search" class="form__input">
<button type="submit"
class="form__button form__button--disabled>
Buscar
</button>
</form>
CSS
.form { ... }
.form--theme-dark { ... }
.form--search { ... }
.form__label { ... }
.form__input { ... }
.form__button { ... }
.form__button--disabled { ... }
| Marco Giacomuzzi

15. A partir de hoy, BEM
Tus compañeros te lo agradecerán
¡y lo sabes!
| Marco Giacomuzzi