SlideShare una empresa de Scribd logo
Domina el CSS de tu
Web con la técnica BEM

(bonito, elegante y molón)
Mauricio Gelves - @maugelves
Consultor WordPress Freelance
maugelves.com
@maugelves | #WCIrun
‘ business minimal
header
2
¿Qué es BEM?
@maugelves | #WCIrun¿Qué es BEM?
- BEM es una Metodología
- Componentes reusables
- Bonito, Elegante, Molón
- Block, Element, Modifier
- Bloque, Elemento, Modificador
<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>
@maugelves | #WCIrun
‘ business minimal
header
5
¿Por qué usar
BEM?
@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
¿El lado oscuro del CSS?
@maugelves | #WCIrun
https://codepen.io/maugelves/pen/xjQqbY
El lado oscuro del !important
@maugelves | #WCIrun
https://codepen.io/maugelves/pen/YLRZxM
El lado oscuro de la Especificidad
@maugelves | #WCIrun
‘ business minimal
header
10
Especificidad
Jerarquía de CSS
@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
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
@maugelves | #WCIrunJerarquía de CSS
a {}
Sith Power: 0, 0, 0, 1
@maugelves | #WCIrunJerarquía de CSS
p a {}
Sith Power: 0, 0, 0, 2
@maugelves | #WCIrunJerarquía de CSS
p a span {}
Sith Power: 0, 0, 0, 3
@maugelves | #WCIrunJerarquía de CSS
.foo {}
Sith Power: 0, 0, 1, 0
@maugelves | #WCIrunJerarquía de CSS
a.foo {}
Sith Power: 0, 0, 1, 1
@maugelves | #WCIrunJerarquía de CSS
p a.foo {}
Sith Power: 0, 0, 1, 2
@maugelves | #WCIrunJerarquía de CSS
.foo .bar {}
Sith Power: 0, 0, 2, 0
@maugelves | #WCIrunJerarquía de CSS
p.foo a.bar {}
Sith Power: 0, 0, 2, 2
@maugelves | #WCIrunJerarquía de CSS
#foo {}
Sith Power: 0, 1, 0, 0
@maugelves | #WCIrunJerarquía de CSS
a#foo {}
Sith Power: 0, 1, 0, 1
@maugelves | #WCIrunJerarquía de CSS
.bar a#foo {}
Sith Power: 0, 1, 1, 1
@maugelves | #WCIrunJerarquía de CSS
style
Sith Power: 1, 0, 0, 0
@maugelves | #WCIrunJerarquía de CSS
!important
Sith Power: Infinito
Cuando todo es !important
¡Nada es important!
ul#personajes li {
color: yellow;
}
.favourite {
color: green;
}
ul#personajes li {color: black;}
Sith Power: 0, 1, 0, 2
.favourite {color: green;}
Sith Power: 0, 0, 1, 0
#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
Evitemos el lado oscuro del CSS
con BEM
Domina el CSS de tu Web con la ténica BEM (bonito, elegante y molón)
@maugelves | #WCIrun
‘ business minimal
header
32
BLOQUE
@maugelves | #WCIrunBloque
- Un componente
- Se puede reutilizar
- Formado por HTML y CSS
- Clase .bloque
- Se pueden anidar
.card .card
.card .card
.btn .btn
.btn .btn
<div class="card">
<button class="btn">Votar</button>
</div>
.card {}
.btn {}
@maugelves | #WCIrun
‘ business minimal
header
36
ELEMENTO
@maugelves | #WCIrunElementos
- Un bloque puede tener elementos
- Complementan el bloque
- No pueden ser usados
independientemente
- Doble guión bajo .bloque__elemento
.card
.card__ftimg
.card__h
.card__meta
.card__logo
<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
@maugelves | #WCIrun
‘ business minimal
header
40
MODIFICADOR
@maugelves | #WCIrunModificador
- Entidad para la apariencia, estado o
comportamiento de
- Un bloque
- Un elemento
- Doble guión .bloque—modificador
.card
.card.card—light
.card.card—dark
Demo con
Modificadores
https://codepen.io/maugelves/pen/RyqZZm
@maugelves | #WCIrun
https://github.com/maugelves/mg-bp-wp-theme
Solo si queda tiempo…
https://cssguidelin.es/
¡Eskerrik asko!
¡Muchas gracias!
Mauricio Gelves - @maugelves

Más contenido relacionado

Más de Mauricio Gelves

Introducción a GitFlow
Introducción a GitFlowIntroducción a GitFlow
Introducción a GitFlow
Mauricio Gelves
 
Segui questi 10 passi per diventare Freelance con WordPress
Segui questi 10 passi per diventare Freelance con WordPressSegui questi 10 passi per diventare Freelance con WordPress
Segui questi 10 passi per diventare Freelance con WordPress
Mauricio Gelves
 
Simple tricks to improve the performance of your site
Simple tricks to improve the performance of your siteSimple tricks to improve the performance of your site
Simple tricks to improve the performance of your site
Mauricio Gelves
 
Gutenberg Blocks Development for Programmers with no time
Gutenberg Blocks Development for Programmers with no timeGutenberg Blocks Development for Programmers with no time
Gutenberg Blocks Development for Programmers with no time
Mauricio Gelves
 
WordPress: el mejor amigo para tu emprendimiento
WordPress: el mejor amigo para tu emprendimientoWordPress: el mejor amigo para tu emprendimiento
WordPress: el mejor amigo para tu emprendimiento
Mauricio Gelves
 
Sviluppo dei blocchi di Gutenberg per programmatori senza tempo
Sviluppo dei blocchi di Gutenberg per programmatori senza tempoSviluppo dei blocchi di Gutenberg per programmatori senza tempo
Sviluppo dei blocchi di Gutenberg per programmatori senza tempo
Mauricio Gelves
 
Gutenberg Blocks Development for Programmers with NO time
Gutenberg Blocks Development for Programmers with NO timeGutenberg Blocks Development for Programmers with NO time
Gutenberg Blocks Development for Programmers with NO time
Mauricio Gelves
 
Flexbox y Grid: Los mejores amigos del maquetador
Flexbox y Grid: Los mejores amigos del maquetadorFlexbox y Grid: Los mejores amigos del maquetador
Flexbox y Grid: Los mejores amigos del maquetador
Mauricio Gelves
 
Desarrollo de bloques de Gutenberg para programadores con poco tiempo
Desarrollo de bloques de Gutenberg para programadores con poco tiempoDesarrollo de bloques de Gutenberg para programadores con poco tiempo
Desarrollo de bloques de Gutenberg para programadores con poco tiempo
Mauricio Gelves
 
Código Bonito con PHP
Código Bonito con PHPCódigo Bonito con PHP
Código Bonito con PHP
Mauricio Gelves
 
Follow these 10 steps to become a freelancer with WordPress
Follow these 10 steps to become a freelancer with WordPressFollow these 10 steps to become a freelancer with WordPress
Follow these 10 steps to become a freelancer with WordPress
Mauricio Gelves
 
10 pasos para convertirte en Freelance con WordPress
10 pasos para convertirte en Freelance con WordPress10 pasos para convertirte en Freelance con WordPress
10 pasos para convertirte en Freelance con WordPress
Mauricio Gelves
 
Gutenberg: Pros and Cons for this big change in WordPress
Gutenberg: Pros and Cons for this big change in WordPressGutenberg: Pros and Cons for this big change in WordPress
Gutenberg: Pros and Cons for this big change in WordPress
Mauricio Gelves
 
Il database di WordPress: Dodici tabelle che servono per fare di tutto e di più.
Il database di WordPress: Dodici tabelle che servono per fare di tutto e di più.Il database di WordPress: Dodici tabelle che servono per fare di tutto e di più.
Il database di WordPress: Dodici tabelle che servono per fare di tutto e di più.
Mauricio Gelves
 
Vive de vacaciones con WordPress
Vive de vacaciones con WordPressVive de vacaciones con WordPress
Vive de vacaciones con WordPress
Mauricio Gelves
 
Quiero aprender WordPress ¿Por donde empiezo?
Quiero aprender WordPress ¿Por donde empiezo?Quiero aprender WordPress ¿Por donde empiezo?
Quiero aprender WordPress ¿Por donde empiezo?
Mauricio Gelves
 
Vive de tus sueños con WordPress
Vive de tus sueños con WordPressVive de tus sueños con WordPress
Vive de tus sueños con WordPress
Mauricio Gelves
 
Taller de Iniciación a WordPress
Taller de Iniciación a WordPressTaller de Iniciación a WordPress
Taller de Iniciación a WordPress
Mauricio Gelves
 
WordPress Database: What's behind those 12 tables
WordPress Database: What's behind those 12 tablesWordPress Database: What's behind those 12 tables
WordPress Database: What's behind those 12 tables
Mauricio Gelves
 
La base de datos de WordPress
La base de datos de WordPressLa base de datos de WordPress
La base de datos de WordPress
Mauricio Gelves
 

Más de Mauricio Gelves (20)

Introducción a GitFlow
Introducción a GitFlowIntroducción a GitFlow
Introducción a GitFlow
 
Segui questi 10 passi per diventare Freelance con WordPress
Segui questi 10 passi per diventare Freelance con WordPressSegui questi 10 passi per diventare Freelance con WordPress
Segui questi 10 passi per diventare Freelance con WordPress
 
Simple tricks to improve the performance of your site
Simple tricks to improve the performance of your siteSimple tricks to improve the performance of your site
Simple tricks to improve the performance of your site
 
Gutenberg Blocks Development for Programmers with no time
Gutenberg Blocks Development for Programmers with no timeGutenberg Blocks Development for Programmers with no time
Gutenberg Blocks Development for Programmers with no time
 
WordPress: el mejor amigo para tu emprendimiento
WordPress: el mejor amigo para tu emprendimientoWordPress: el mejor amigo para tu emprendimiento
WordPress: el mejor amigo para tu emprendimiento
 
Sviluppo dei blocchi di Gutenberg per programmatori senza tempo
Sviluppo dei blocchi di Gutenberg per programmatori senza tempoSviluppo dei blocchi di Gutenberg per programmatori senza tempo
Sviluppo dei blocchi di Gutenberg per programmatori senza tempo
 
Gutenberg Blocks Development for Programmers with NO time
Gutenberg Blocks Development for Programmers with NO timeGutenberg Blocks Development for Programmers with NO time
Gutenberg Blocks Development for Programmers with NO time
 
Flexbox y Grid: Los mejores amigos del maquetador
Flexbox y Grid: Los mejores amigos del maquetadorFlexbox y Grid: Los mejores amigos del maquetador
Flexbox y Grid: Los mejores amigos del maquetador
 
Desarrollo de bloques de Gutenberg para programadores con poco tiempo
Desarrollo de bloques de Gutenberg para programadores con poco tiempoDesarrollo de bloques de Gutenberg para programadores con poco tiempo
Desarrollo de bloques de Gutenberg para programadores con poco tiempo
 
Código Bonito con PHP
Código Bonito con PHPCódigo Bonito con PHP
Código Bonito con PHP
 
Follow these 10 steps to become a freelancer with WordPress
Follow these 10 steps to become a freelancer with WordPressFollow these 10 steps to become a freelancer with WordPress
Follow these 10 steps to become a freelancer with WordPress
 
10 pasos para convertirte en Freelance con WordPress
10 pasos para convertirte en Freelance con WordPress10 pasos para convertirte en Freelance con WordPress
10 pasos para convertirte en Freelance con WordPress
 
Gutenberg: Pros and Cons for this big change in WordPress
Gutenberg: Pros and Cons for this big change in WordPressGutenberg: Pros and Cons for this big change in WordPress
Gutenberg: Pros and Cons for this big change in WordPress
 
Il database di WordPress: Dodici tabelle che servono per fare di tutto e di più.
Il database di WordPress: Dodici tabelle che servono per fare di tutto e di più.Il database di WordPress: Dodici tabelle che servono per fare di tutto e di più.
Il database di WordPress: Dodici tabelle che servono per fare di tutto e di più.
 
Vive de vacaciones con WordPress
Vive de vacaciones con WordPressVive de vacaciones con WordPress
Vive de vacaciones con WordPress
 
Quiero aprender WordPress ¿Por donde empiezo?
Quiero aprender WordPress ¿Por donde empiezo?Quiero aprender WordPress ¿Por donde empiezo?
Quiero aprender WordPress ¿Por donde empiezo?
 
Vive de tus sueños con WordPress
Vive de tus sueños con WordPressVive de tus sueños con WordPress
Vive de tus sueños con WordPress
 
Taller de Iniciación a WordPress
Taller de Iniciación a WordPressTaller de Iniciación a WordPress
Taller de Iniciación a WordPress
 
WordPress Database: What's behind those 12 tables
WordPress Database: What's behind those 12 tablesWordPress Database: What's behind those 12 tables
WordPress Database: What's behind those 12 tables
 
La base de datos de WordPress
La base de datos de WordPressLa base de datos de WordPress
La base de datos de WordPress
 

Domina el CSS de tu Web con la ténica BEM (bonito, elegante y molón)