SMACSS, adiós al caos

Por Laura Jerez
Developer at OpenSistemas

Trabajar con archivos CSS es como entrar en el caos. Cualquier habitación de adolescente del planeta es el paraíso del orden en comparación. En ese desorden sistemático, puede que hayas intentado mantener el código lo más ordenado posible, cayendo en el imposible de mantener un archivo kilométrico (¡malditos style.css!). O quizás has terminado con una lista inmensa de archivos innombrables. Sin embargo, no tenemos que desesperar, solo tenemos que seguir el ingenioso método de trabajo de Jonathan Snook.

Como los adolescentes que crecen y deciden poner orden, Snook decidió encontrar la manera de organizar los documentos CSS. Observar, pensar y estructurar. Y así nace su libro Scalable and Modular Architecture for CSS, la nueva biblia de estructuración CSS. No se trata de un framework, sino de una guía, una metodología del trabajo para conseguir una organización de las hojas de trabajos flexible y de fácil mantenimiento.

El sistema de Snook es sencillo y eficaz. Imaginemos una casa, la nuestra. Ya no somos jóvenes desordenados y queremos construir un buen hogar. Por tanto, lo primero son unos buenos cimientos, lo que Snook llama Base.css. En esta categoría incluiremos las reglas básicas de los elementos (los antiguos reset.css o normalize.css), lo que sustenta nuestro trabajo. Seguimos por la organización de las zonas del hogar, ¿cuántas paredes, columnas,…?, para nosotros Layout.css, donde definiremos la estructura, su posicionamiento y colocación.

Además, nuestra casa contará con puertas, ventanas, mobiliario…, elementos reutilizables y modulables que Snook define dentro de la carpeta Module.css. Las puertas y ventanas (elementos del Module) pueden estar en diferentes estados: abiertas, cerradas,… Pues esos elementos mutables se encontrarán en la archivo State.css. Y, por último, ¿de qué color pintamos las paredes?. Theme.css es la categoría que los definirá en nuestra web, así como nuestras tipografías,etc.