SlideShare una empresa de Scribd logo
Metodología para mantener baja la especificidad CSS.
BEM
Block Element Modifier
| Marco Giacomuzzi
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
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
Por qué BEM
Es la menos compleja y ofrece una buena arquitectura
de componentes con una terminología semántica.
| Marco Giacomuzzi
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
| Marco Giacomuzzi
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
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
Nomenclatura
Un solo código, un mismo idioma:
estructura y convenciones en la nomenclatura.
| Marco Giacomuzzi
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
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
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
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
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
A partir de hoy, BEM
Tus compañeros te lo agradecerán
¡y lo sabes!
| Marco Giacomuzzi

Más contenido relacionado

Similar a BEM

Presentación html
Presentación htmlPresentación html
Presentación html
Alberto Molina
 
Arquitectura frontend con BEM y SASS
Arquitectura frontend con BEM y SASSArquitectura frontend con BEM y SASS
Arquitectura frontend con BEM y SASS
Roberto Lucha Sedeño
 
Capas
CapasCapas
Capas en HTML
Capas en HTMLCapas en HTML
Capas en HTML
Inmaculada Concepción
 
Hoja de estilo
Hoja de estiloHoja de estilo
Hoja de estilo
Nadin David Herrera
 
Lenguaje html y css
Lenguaje html y cssLenguaje html y css
Lenguaje html y css
RicardoFerrandoGmez
 
Lenguaje html y css
Lenguaje html y cssLenguaje html y css
Lenguaje html y css
RicardoFerrandoGmez
 
DEBER HOJA DE ESTILO (CSS) blog blogger blogspot
DEBER HOJA DE ESTILO (CSS) blog blogger blogspotDEBER HOJA DE ESTILO (CSS) blog blogger blogspot
DEBER HOJA DE ESTILO (CSS) blog blogger blogspot
LISSYCE
 
Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx
Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptxDiseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx
Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx
MarceloBedn1
 
Ppt w3c1
Ppt w3c1Ppt w3c1
Ppt w3c1
alejo70
 
Ppt w3c1
Ppt w3c1Ppt w3c1
Ppt w3c1
alejo70
 
css3
css3css3
Ppt w3c1
Ppt w3c1Ppt w3c1
Ppt w3c1
alejo70
 
Ppt w3c1
Ppt w3c1Ppt w3c1
Ppt w3c1
alejo70
 
Ppt w3c1
Ppt w3c1Ppt w3c1
Ppt w3c1
alejo70
 
manualrapido_css.pdf
manualrapido_css.pdfmanualrapido_css.pdf
manualrapido_css.pdf
YolitaGaona
 
Manualrapido css
Manualrapido cssManualrapido css
Manualrapido css
juan flores méndez
 
Manual para elaborar páginas HTM5 con CSS
Manual para elaborar páginas HTM5 con CSSManual para elaborar páginas HTM5 con CSS
Manual para elaborar páginas HTM5 con CSS
ssuseraf13d4
 
manua.pdf
manua.pdfmanua.pdf
manua.pdf
NostromoMX
 
TECNOLOGIAS WEBIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
TECNOLOGIAS WEBIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIITECNOLOGIAS WEBIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
TECNOLOGIAS WEBIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Jesusvuelvas2
 

Similar a BEM (20)

Presentación html
Presentación htmlPresentación html
Presentación html
 
Arquitectura frontend con BEM y SASS
Arquitectura frontend con BEM y SASSArquitectura frontend con BEM y SASS
Arquitectura frontend con BEM y SASS
 
Capas
CapasCapas
Capas
 
Capas en HTML
Capas en HTMLCapas en HTML
Capas en HTML
 
Hoja de estilo
Hoja de estiloHoja de estilo
Hoja de estilo
 
Lenguaje html y css
Lenguaje html y cssLenguaje html y css
Lenguaje html y css
 
Lenguaje html y css
Lenguaje html y cssLenguaje html y css
Lenguaje html y css
 
DEBER HOJA DE ESTILO (CSS) blog blogger blogspot
DEBER HOJA DE ESTILO (CSS) blog blogger blogspotDEBER HOJA DE ESTILO (CSS) blog blogger blogspot
DEBER HOJA DE ESTILO (CSS) blog blogger blogspot
 
Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx
Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptxDiseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx
Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx
 
Ppt w3c1
Ppt w3c1Ppt w3c1
Ppt w3c1
 
Ppt w3c1
Ppt w3c1Ppt w3c1
Ppt w3c1
 
css3
css3css3
css3
 
Ppt w3c1
Ppt w3c1Ppt w3c1
Ppt w3c1
 
Ppt w3c1
Ppt w3c1Ppt w3c1
Ppt w3c1
 
Ppt w3c1
Ppt w3c1Ppt w3c1
Ppt w3c1
 
manualrapido_css.pdf
manualrapido_css.pdfmanualrapido_css.pdf
manualrapido_css.pdf
 
Manualrapido css
Manualrapido cssManualrapido css
Manualrapido css
 
Manual para elaborar páginas HTM5 con CSS
Manual para elaborar páginas HTM5 con CSSManual para elaborar páginas HTM5 con CSS
Manual para elaborar páginas HTM5 con CSS
 
manua.pdf
manua.pdfmanua.pdf
manua.pdf
 
TECNOLOGIAS WEBIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
TECNOLOGIAS WEBIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIITECNOLOGIAS WEBIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
TECNOLOGIAS WEBIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
 

Último

primer manual de nuestra compañía de soporte
primer manual de nuestra compañía de soporteprimer manual de nuestra compañía de soporte
primer manual de nuestra compañía de soporte
eliersin13
 
DIAPOSITIVA DE LA MEMORIA RAM.PPXT.-MARIATRUJILLO.
DIAPOSITIVA DE LA MEMORIA RAM.PPXT.-MARIATRUJILLO.DIAPOSITIVA DE LA MEMORIA RAM.PPXT.-MARIATRUJILLO.
DIAPOSITIVA DE LA MEMORIA RAM.PPXT.-MARIATRUJILLO.
Maria Celeste Trujillo Cruz
 
Introduccion al Lenguaje de Programación C++
Introduccion al Lenguaje de Programación  C++Introduccion al Lenguaje de Programación  C++
Introduccion al Lenguaje de Programación C++
PaulDelgadoSoto
 
Mi Carnaval, Aplicación web para la gestión del carnaval y la predicción basa...
Mi Carnaval, Aplicación web para la gestión del carnaval y la predicción basa...Mi Carnaval, Aplicación web para la gestión del carnaval y la predicción basa...
Mi Carnaval, Aplicación web para la gestión del carnaval y la predicción basa...
micarnavaltupatrimon
 
Mi Carnaval, Aplicación web para la gestión del carnaval y la predicción basa...
Mi Carnaval, Aplicación web para la gestión del carnaval y la predicción basa...Mi Carnaval, Aplicación web para la gestión del carnaval y la predicción basa...
Mi Carnaval, Aplicación web para la gestión del carnaval y la predicción basa...
micarnavaltupatrimon
 
TARJETA MADRE DE DAYRON FABRI RUIZ-1.pptx
TARJETA MADRE DE DAYRON FABRI RUIZ-1.pptxTARJETA MADRE DE DAYRON FABRI RUIZ-1.pptx
TARJETA MADRE DE DAYRON FABRI RUIZ-1.pptx
dayronfabricioruizmo
 
Buscador de Eventos y Fiestas en España - Buscafiesta
Buscador de Eventos y Fiestas en España - BuscafiestaBuscador de Eventos y Fiestas en España - Buscafiesta
Buscador de Eventos y Fiestas en España - Buscafiesta
holabuscafiesta
 
herramientaswebpdfwww.edu.pe.edu.institutoluisevalcarcel
herramientaswebpdfwww.edu.pe.edu.institutoluisevalcarcelherramientaswebpdfwww.edu.pe.edu.institutoluisevalcarcel
herramientaswebpdfwww.edu.pe.edu.institutoluisevalcarcel
Eduardo455921
 

Último (8)

primer manual de nuestra compañía de soporte
primer manual de nuestra compañía de soporteprimer manual de nuestra compañía de soporte
primer manual de nuestra compañía de soporte
 
DIAPOSITIVA DE LA MEMORIA RAM.PPXT.-MARIATRUJILLO.
DIAPOSITIVA DE LA MEMORIA RAM.PPXT.-MARIATRUJILLO.DIAPOSITIVA DE LA MEMORIA RAM.PPXT.-MARIATRUJILLO.
DIAPOSITIVA DE LA MEMORIA RAM.PPXT.-MARIATRUJILLO.
 
Introduccion al Lenguaje de Programación C++
Introduccion al Lenguaje de Programación  C++Introduccion al Lenguaje de Programación  C++
Introduccion al Lenguaje de Programación C++
 
Mi Carnaval, Aplicación web para la gestión del carnaval y la predicción basa...
Mi Carnaval, Aplicación web para la gestión del carnaval y la predicción basa...Mi Carnaval, Aplicación web para la gestión del carnaval y la predicción basa...
Mi Carnaval, Aplicación web para la gestión del carnaval y la predicción basa...
 
Mi Carnaval, Aplicación web para la gestión del carnaval y la predicción basa...
Mi Carnaval, Aplicación web para la gestión del carnaval y la predicción basa...Mi Carnaval, Aplicación web para la gestión del carnaval y la predicción basa...
Mi Carnaval, Aplicación web para la gestión del carnaval y la predicción basa...
 
TARJETA MADRE DE DAYRON FABRI RUIZ-1.pptx
TARJETA MADRE DE DAYRON FABRI RUIZ-1.pptxTARJETA MADRE DE DAYRON FABRI RUIZ-1.pptx
TARJETA MADRE DE DAYRON FABRI RUIZ-1.pptx
 
Buscador de Eventos y Fiestas en España - Buscafiesta
Buscador de Eventos y Fiestas en España - BuscafiestaBuscador de Eventos y Fiestas en España - Buscafiesta
Buscador de Eventos y Fiestas en España - Buscafiesta
 
herramientaswebpdfwww.edu.pe.edu.institutoluisevalcarcel
herramientaswebpdfwww.edu.pe.edu.institutoluisevalcarcelherramientaswebpdfwww.edu.pe.edu.institutoluisevalcarcel
herramientaswebpdfwww.edu.pe.edu.institutoluisevalcarcel
 

BEM

  • 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
  • 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