BEM
BEM – Block Element Modifier es una metodología que lo ayuda a crear componentes reutilizables y compartir código en el desarrollo de aplicaciones para usuario.
web oficial:
http://getbem.com/
http://atomicdesign.bradfrost.com/chapter-2/
El código CSS tiende al caos cuando se trabaja sin un concepto rector para su ordenamiento. ¿Cómo mantener código CSS ordenado y de fácil mantenimiento?
Cuando del lenguaje de presentación de la WWW se trata, mucho se habla de las nuevas características de CSS3 en cuanto a sus propiedades —gradientes, sombras, transparencias, etc— pero se presta poca atención a cómo ordenar el código CSS en proyectos grandes.
El problema
Es muy común cuando se diseña la interfaz de una webapp, por ejemplo, que los archivos lleguen rápidamente al orden de las miles de líneas de código.
No somos máquinas: lidiar con archivos que contienen miles de renglones de texto técnico es un problema que dificulta nuestro trabajo, complicando los tiempos y en desmedro de la calidad del producto final.
Incluso cuando trabajar con archivos kilométricos pueda ser viable para algunos, esta situación se vuelve en contra cuando debemos compartir el código con nuestros compañeros de trabajo, o incluso con nosotros mismos a futuro!
Tomar un proyecto dentro de un mes y encontrarse con este lío puede ser catastrófico.
Otro gran problema es la repetición de código, por lo general el trabajo sin una estructura de organización genera la necesidad de incluir el mismo código en varios lugares. Recordemos que en ningún caso es conveniente la repetición de código.
Una solución: OOCSS
Los programadores se han estado enfrentando a este tipo de problemas durante años. Existen muchos paradigmas para la generación de código y la lógica de un programa: uno de ellos es la Programación Orientada a Objetos (OOP, por su sigla en inglés).
Este método de trabajo permite la fragmentación de un proyecto grande en unidades mínimas (los mentados objetos), cada una con sus propias responsabilidades.
Lo mismo puede hacerse con el lenguaje CSS, de forma tal que el código pueda ser reusable.
Verán cómo el siguiente ejemplo plantea la repetición de ciertas propiedades y valores de CSS (algo que preferimos evitar).
#button-big {
font-size: 24px;
font-weight: bold;
display: inline-block;
color: #fff;
background: #0d0;
padding: 0.8em 1.5em;
border-radius: 8px;
box-shadow: inset 0 -5px 0 rgba(0,0,0,0.1);
}
#button-small {
font-size: 16px;
display: inline-block;
color: #fff;
background: #0d0;
padding: 0.5em 1em;
border-radius: 4px;
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1);
}
Ambos botones comparten gran parte del código, lo que podemos hacer es fragmentar las propiedades de forma más inteligente y aprovechar una gran ventaja de las clases: un mismo elemento de HTML puede tener varias clases aplicadas al mismo tiempo.
Aquí el resultado final:
.button {
font-family: Arial, sans-serif;
display: inline-block;
color: #fff;
background: #0d0;
padding: 0.5em 1em;
border-radius: 4px;
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1);
}
.button.small {
font-size: 16px;
}
.button.big {
font-size: 24px;
font-weight: bold;
padding: 0.8em 1.5em;
border-radius: 8px;
box-shadow: inset 0 -5px 0 rgba(0,0,0,0.1);
}
De esta manera, minimizamos el código repetido, y nos permitimos el agregado de mayor cantidad de botones a futuro. Por ejemplo, podríamos agregar un botón rojo para situaciones de peligro.
.button.danger {
background: #d00;
}
Si quisiéramos incluir un botón de peligro (rojo), que además fuera grande, aplicaríamos las tres classes en el HTML:
<a href="#" class="button big danger">Cuidado!</a>
Como se ve, el nuevo código es completamente modular 