¿Otra?
No se si llamarla “otra”, porque es compatible con BEM y pueden trabajar juntas. BEM es más un sistema de nomenclatura (y uso) para evitar problemas de especificidad y herencia y Smacss es un sistema organizativo de las propias hojas de estilo para facilitar el escalar proyectos, es un poco mas antigua.
¿Y de que va?
Layout: Aquí va todo lo referente a la estructura de la pagina, las secciones, etc.
Module: Partes reutilizables de la web cuyo css debería ser escrito pensando en su independencia.
State: Todas las propiedades relativas a estados, desplegado, activo, apagado, colapsado, etc.
Theme: Unicamente el aspecto visual, fuentes, colores., etc.
Es un esquema flexible, una web podría no necesitar un theme, o podría necesitar un .scss añadido (fonts.scss por ejemplo) si necesitara retoques según el idioma elegido.
Idealmente, estas partes deberían estar en archivos independientes, con los antiguos import de css esto penalizaría la carga pero con sass no hay problemas.
¿Como se escribe?
Las partes relacionadas con un modulo usaran su nombre como prefijo para saber a cual hay que aplicarlas: .example-header
En este ejemplo:
body.article > #main > #content > #intro > p > strong { }
Por ejemplo esto tambien seria caca para Smacss:
#sidebar div h3
.modulo h3
Vale, quiere reducir la herencia al mínimo ¿y que opina de la especificidad?
Pongamos que tenemos esto:
.pod {
width: 100%;
}
.pod input[type=text] {
width: 50%;
}
Y necesitamos que cuando esté en un #sidebar el ancho del input sea de 100%. Lo primero que nos pide el cuerpo es añadir un selector padre así:
#sidebar .pod input[type=text] {
width: 100%;
}
Eso añade especificidad al input, si necesitaramos reutilizar la clase .pod dentro de un sidebar con un nuevo ancho de su input, de nuevo habrá que superar la especificidad que hemos puesto añadiendo un selector mas o metiendo un temido !important.
Para evitarlo Smacss propone añadir una nueva clase derivada de .pod (smacss las llama subclases) quedaria así.
.pod {
width: 100%;
}
.pod-short input[type=text] {
width: 50%;
}
.pod-callout {
width: 200px;
}
.pod-callout input[type=text] {
width: 180px;
}
Y se aplicarian así:
<div class="pod pod-short">...</div> <div class="pod pod-callout">...</div>
Recordemos que BEM supera los problemas de especificidad usando solamente clases y nunca usando selectores, así, todas las clases se encuentran al mismo nivel y deja de existir la especificidad, una clase machaca a la anterior y chimpun.
¿Y a ti te mola?
Pero me rechina un poco cuando habla de añadir clases para conseguir diseños, y de nuevo, habla de problemas que pueden o no pueden serlo, o pueden resolverse de otras maneras.
Igual puedes tener que rediseñar un blog con unos contenidos que ya tienen una maquetación determinada y no puedes añadir clases…
¿Donde saber más?
El librito del autor está en: