El layout o estructura de un interfaz web es la manera de organizar o disponer los elementos visuales en la página. El diseño del layout determina la posición de cada uno de los elementos que componen el interfaz web (cabecera, menús, banners, contenido, etc.).

En ocasiones resulta difícil pensar en cómo abordar el diseño con CSS. Las recomendaciones actuales van en la línea de priorizar el uso de clases para poder utilizarlas dentro de los archivos HTML. Dentro de esta recomendación nos encontramos con dos posibilidades: priorizar el diseño de componentes o priorizar el diseño de clases de utilidades.

En los últimos años han aparecido una gran cantidad de preprocesadores CSS que permiten incorporar técnicas de lenguajes de programación (variables, anidamiento, mixins,…) a la creación de hojas de estilo. La desventaja que tienen es que el código debe compilarse para generar CSS válido que pueda ser utilizado por el navegador.

Frente a esto, es interesante conocer que CSS permite definir variables que pueden ser reutilizadas en todo el documento, proporcionando una alternativa sencilla y estándar, aunque lógicamente menos potente.