1. Domina el CSS de tu
Web con la técnica BEM
(bonito, elegante y molón)
Mauricio Gelves - @maugelves
Consultor WordPress Freelance
maugelves.com

2. @maugelves | #WCIrun
‘ business minimal
header
2
¿Qué es BEM?

3. @maugelves | #WCIrun¿Qué es BEM?
- BEM es una Metodología
- Componentes reusables
- Bonito, Elegante, Molón
- Block, Element, Modifier
- Bloque, Elemento, Modificador

4. <div class="card card--light”>
<h2 class="card__h">Luke Skywalker</h2>
<p><span class=“card__label”>Nacimiento:</span>19 ABY</p>
<p><span class=“card__label”>planeta:</span>Tatooine</p>
</div>

5. @maugelves | #WCIrun
‘ business minimal
header
5
¿Por qué usar
BEM?

6. @maugelves | #WCIrun¿Por qué usar BEM?
- Definir una estructura de estilos
- Reutilizar código y ahorrar tiempo
- Mejor comunicación con diseñadores
- Para evitar CSS del lado oscuro

7. ¿El lado oscuro del CSS?

8. @maugelves | #WCIrun
https://codepen.io/maugelves/pen/xjQqbY
El lado oscuro del !important

9. @maugelves | #WCIrun
https://codepen.io/maugelves/pen/YLRZxM
El lado oscuro de la Especificidad

10. @maugelves | #WCIrun
‘ business minimal
header
10
Especificidad
Jerarquía de CSS

11. @maugelves | #WCIrunJerarquía de CSS
- Jerarquía CSS = a, b, c, d
- a = ∑ de atributos inline
- b = ∑ de atributos ID
- c = ∑ de clases y pseudo-classes
- d = ∑ de etiquetas HTML

12. img{}
0,0,0,1
.maul{}
0,0,1,0
#darth{}
0,1,0,0
style=“”
1,0,0,0
Mayor Jerarquía Menor Jerarquía
!important

13. @maugelves | #WCIrunJerarquía de CSS
a {}
Sith Power: 0, 0, 0, 1

14. @maugelves | #WCIrunJerarquía de CSS
p a {}
Sith Power: 0, 0, 0, 2

15. @maugelves | #WCIrunJerarquía de CSS
p a span {}
Sith Power: 0, 0, 0, 3

16. @maugelves | #WCIrunJerarquía de CSS
.foo {}
Sith Power: 0, 0, 1, 0

17. @maugelves | #WCIrunJerarquía de CSS
a.foo {}
Sith Power: 0, 0, 1, 1

18. @maugelves | #WCIrunJerarquía de CSS
p a.foo {}
Sith Power: 0, 0, 1, 2

19. @maugelves | #WCIrunJerarquía de CSS
.foo .bar {}
Sith Power: 0, 0, 2, 0

20. @maugelves | #WCIrunJerarquía de CSS
p.foo a.bar {}
Sith Power: 0, 0, 2, 2

21. @maugelves | #WCIrunJerarquía de CSS
#foo {}
Sith Power: 0, 1, 0, 0

22. @maugelves | #WCIrunJerarquía de CSS
a#foo {}
Sith Power: 0, 1, 0, 1

23. @maugelves | #WCIrunJerarquía de CSS
.bar a#foo {}
Sith Power: 0, 1, 1, 1

24. @maugelves | #WCIrunJerarquía de CSS
style
Sith Power: 1, 0, 0, 0

25. @maugelves | #WCIrunJerarquía de CSS
!important
Sith Power: Infinito

26. Cuando todo es !important
¡Nada es important!

27. ul#personajes li {
color: yellow;
}
.favourite {
color: green;
}

28. ul#personajes li {color: black;}
Sith Power: 0, 1, 0, 2
.favourite {color: green;}
Sith Power: 0, 0, 1, 0

29. #darth {}
Sith Power: 0, 1, 0, 0
._1._2._3._4._5._6._7._8._9._10._11._12._13._1
4._15._16._17._18._19._20._21._22._23._24._2
5._26._27._28._29._30._31._32._33._34._35._3
6._37._38._39._40._41._42._43._44._45._46._4
7._48._49._50._51._52._53._54._55._56._57._5
8._59._60._61._62._63._64._65._66._67._68._6
9._70._71._72._73._74._75._76._77._78._79._8
0._81._82._83._84._85._86._87._88._89._90._9
1._92._93._94._95._96._97._98._99._100 {}
Sith Power: 0, 0, 100, 0
https://codepen.io/maugelves/pen/RyqZZm

30. Evitemos el lado oscuro del CSS
con BEM

32. @maugelves | #WCIrun
‘ business minimal
header
32
BLOQUE

33. @maugelves | #WCIrunBloque
- Un componente
- Se puede reutilizar
- Formado por HTML y CSS
- Clase .bloque
- Se pueden anidar

34. .card .card
.card .card
.btn .btn
.btn .btn

35. <div class="card">
<button class="btn">Votar</button>
</div>
.card {}
.btn {}

36. @maugelves | #WCIrun
‘ business minimal
header
36
ELEMENTO

37. @maugelves | #WCIrunElementos
- Un bloque puede tener elementos
- Complementan el bloque
- No pueden ser usados
independientemente
- Doble guión bajo .bloque__elemento

38. .card
.card__ftimg
.card__h
.card__meta
.card__logo

39. <div class="card">
<img src="#" class="card__ftimg"/>
<h2 class="card__h">Luke Skywalker</h2>
<div class="card__meta"></div>
<img src="#" class="card__logo"/>
<button class="btn">Votar</button>
</div>
https://codepen.io/maugelves/pen/qYGeMZ?editors=1100

40. @maugelves | #WCIrun
‘ business minimal
header
40
MODIFICADOR

41. @maugelves | #WCIrunModificador
- Entidad para la apariencia, estado o
comportamiento de
- Un bloque
- Un elemento
- Doble guión .bloque—modificador

42. .card

43. .card.card—light

44. .card.card—dark

45. Demo con
Modificadores
https://codepen.io/maugelves/pen/RyqZZm

46. @maugelves | #WCIrun
https://github.com/maugelves/mg-bp-wp-theme
Solo si queda tiempo…
https://cssguidelin.es/

47. ¡Eskerrik asko!
¡Muchas gracias!
Mauricio Gelves - @maugelves