Sass y CSS nesting, buenos amigos de BEM

Por Aitor Reviriego Amor

Después de ver la técnica completa, de como aplicar BEM tanto de manera estricta como adaptándolo a situaciones más específicas, me gustaría mostrar cómo podemos mejorarlo aún más, mediante la implementación de diversas estrategias.

Tras examinar en detalle la técnica de aplicación de BEM, tanto en su forma estricta como en adaptaciones a contextos específicos, procederé a mostrar cómo se estructuraría el código CSS correspondiente. Me gustaría mostrar cómo podemos mejorarlo aún más, con la ayuda de diferentes técnicas.

Iniciando con el código de la hoja de estilos resultante de mi anterior artículo: “Profundizando en Bem sobre una estructura más compleja”, voy a mostrar un par de opciones aplicables para mejorar la simplicidad y legibilidad de dicha hoja de estilos.

La hoja de estilos base para mi ejemplo es la siguiente.

.post post--featured {}
.post__image {}
.post__title {}
.post__text {}
.post__author {}
.post__likes {}
.post__actions {}
.post__button {}
.post__button--repost {}
.post__button--like {}

El ejemplo anterior, es la manera de crear la hoja de estilos CSS tras la aplicación de BEM. Voy a mostrar cómo podemos llevar esto un paso más allá y mejorar aún más nuestro código, para hacerlo más limpio y fácil de entender, esta vez el CSS.

Sass

Sass, acrónimo de ‘Syntactically Awesome Stylesheets’, es un preprocesador de CSS que desempeña un papel fundamental en la optimización del desarrollo de hojas de estilos.

La instalación de Sass en nuestro proyecto se caracteriza por su simplicidad, siendo posible a través de un único y sencillo comando.

npm install sass

¿Que me aporta Sass?

El uso de Sass va a simplificar tanto la creación de las clases en nuestra hoja de estilos, como la comprensión, escalabilidad y mantenimiento de las mismas.

Anidando y utilizando el prefijo &, obtengo el mismo resultado después de la magia que aplica Sass por debajo.

Hoja de estilos con Sass

.post {
    &--featured {}
    &__image {}
    &__title {}
    &__text {}
    &__author {}
    &__likes {}
    &__actions {}
    &__button {
        &--repost {}
        &--like {}
    }
}

Resultado después del procesado de Sass

.post post--featured {}
.post__image {}
.post__title {}
.post__text {}
.post__author {}
.post__likes {}
.post__actions {}
.post__button {}
.post__button--repost {}
.post__button--like {}

CSS nesting

CSS nesting es nativo de los navegadores, aunque hay que tener en cuenta que solo las versiones más modernas de los navegadores soportan el anidamiento en CSS. Chrome a partir de la versión 120, Edge a partir de la versión 120, Safari a partir de la 17.2 y Firefox a partir de la 117.

Esto me lleva a pensar que empieza a no ser tan buena idea el uso de CSS nesting.

¿Que me aporta CSS nesting?

Haciendo uso de CSS nesting, el resultado obtenido en mi ejemplo no va a ser el esperado. A continuación, te mostraré un fragmento del código para que veas cómo se comporta el anidamiento en CSS nesting.

Hoja de estilos con CSS nesting

.post {
    &__image {}
    &__title {}
    &__text {}
    }
}

Resultado después del procesado de CSS nesting

.post {}
__image.post {}
__title.post {}
__text.post {}

Como se puede ver, las clases no se han generado como esperaba. El sistema interpretó que __image, era el nombre de un “custom element” de HTML, y por eso las clases se crearon de forma distinta a como lo haría Sass. No es que esto esté mal, sino que las reglas de anidación en CSS nesting son diferentes a las de Sass, y esto podría llevarnos a cometer errores.

Para lograr el resultado que se obtendría usando Sass, una opción es utilizar PostCss nested. El uso de PostCss nested no solo imita el comportamiento de Sass, sino que también elimina la incompatibilidad que surge con las reglas de anidación de CSS nesting, en las distintas versiones de navegadores.

Resultado después del procesado de PostCss

.post {}
.post__image {}
.post__title {}
.post__text {}

Conclusión

Tras considerar todas estas opciones y sus beneficios al usarlas junto con BEM, he llegado a la conclusión de que una excelente combinación sería BEM + Sass. Esta mezcla resulta ideal debido a cómo simplifica el código. Además de desacoplar la hoja de estilos del código HTML, también mejora significativamente la legibilidad y aumenta la mantenibilidad del código, razones por las cuales me inclino hacia esta opción.