¿Quieres crear código más eficiente y manejable en CSS?
Con BEM CSS, puede nombrar y ordenar fácilmente sus bloques, lo que facilita la comprensión y administración de su código.
Además, BEM ayuda en la modularidad y la reutilización de código.
¡Empiece a utilizar BEM hoy y compruebe los beneficios usted mismo!
¿Qué es BEM CSS?
BEM significa Block Element Modifier y es una forma de nombrar sus elementos para que sean más fáciles de entender y administrar. BEM CSS es una excelente manera de mantener sus archivos CSS organizados y fáciles de leer.
- Ayuda a crear componentes reutilizables.
- Promueve la modularidad del código CSS.
- Hace que su código sea legible y escalable
- Proporciona baja especificidad entre los selectores de CSS
Se recomienda usarlo con un preprocesador CSS como Sass. Pero también se puede utilizar sin preprocesador.
Ejemplos de CSS BEM
La sintaxis de BEM es muy sencilla.
- .bloquear
- .block--modificador
- .bloque__elemento
- .block__element--modificador
Bloquear:
Es un componente de nivel superior o el bloque principal.
Ejemplo:
- (.tarjeta)
- (.artículo)
- (.btn)
Elemento:
Los elementos son las piezas que construyen un bloque.
Ejemplo:
- (.tarjeta__título)
- (.artículo__contenido)
- (.btn__icono)
Modificador:
Son como variantes del bloque o de un elemento. Me gusta (.btn--primario, .card--lg)
Ejemplo:
- (.card--lg, .card__title--light)
- (.artículo--destacado, .article__content--sm)
- (.btn--primario, .btn__icon--animado)
Conclusión
Si está buscando optimizar su proceso de desarrollo de CSS, ¡BEM podría ser la convención de nomenclatura!
Como se explica en detalle en este artículo, BEM CSS es una excelente manera de mejorar su flujo de trabajo de desarrollo de CSS y hacer que su código sea más organizado, legible y fácil de mantener.
Asi que, por que no intentarlo?
Puede leer más sobre BEM o explorar los ejemplos proporcionados en esta hoja de referencia de BEM .
![[SOLVED] Order status has changed from pending payment to failed. Please retry.](http://www.coderchamp.com/cdn/shop/articles/bd63849d174920a2cb26dc60f32a1184.jpg?v=1698714883&width=580)
