Vital! Ultra necesario! Divino y estupendo! Y otros halagos recibimos cuando encuentran nuestro código prolijo y bien documentado, caso contrario es lo mismo que desearle muerte a próximes programadores que tengan que trabajar con nuestros desarrollos.
Si bien hay varias metodologías para lograr un archivo css que sea fácil de mantener la ventaja es que está orientado tanto para estructurar CSS como UI. Es menos confuso que otros métodos como el SMACSS pero igual provee de una buena arquitetctura como con OOCS con el plus de una terminología fácil de reconocer.
Bloques, Elementos y Modificadores
Son las calves de esta metodología, una forma estricta de nombrar la estructura de nuestras producciones.
Bloque. Unidad que es relevante por sí misma. Ejemplos: header, container, menu, checkbox, input.
Elemento. Es parte de un bloque que no tiene sentido por sí mismo y está semánticamente relacionado con su respectivo bloque. Ejemplos: menu item, list item, checkbox caption, header title.
Modificador. Es una forma de marcar diferenciando tanto un bloque como un elemento. Se lo usa para modificar su apariencia o comportamiento. Ejemplos: disabled, highlighted, checked, fixed, size big.
Es modular, reutilizable y estructura visualmente las hojas de estilos volviendo fácil de reconocer su lugar en el html.
¿Cómo usarlo?
.boton {
display: inline-block;
border-radius: 3px;
padding: 7px 12px;
border: 1px solid #D5D5D5;
background-image: linear-gradient(#EEE, #DDD);
font: 700 13px/18px Helvetica, arial;
}
.boton--estado-exito {
color: #FFF;
background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
border-color: #4A993E;
}
.boton--estado-error {
color: #900;
}Primero definimos el elemento, luego le otorgamos modificadores! En el html cada botón requiere en su estado «natural» la clase «boton», luego según la situacion se le agrega el modificador por ejemplo la clase quedaría así «boton boton–estado-exito».
Por otro lado recomendamos utilizar modificadores para la interacción con js, ya que esto lo vuelve de fácil manteminiento, separar las clases para lo que es cómo se muestran y por otro lado para la programación permite cambiar constantemente los estilos sin tener que estar revisando o pisándonos con los archivos .js!
Ejemplo:
«boton boton–agregar».
Sitio web: