Arquitectura CSS

La arquitectura CSS es la metodología para organizar y estructurar hojas de estilo. Su objetivo es mantener el código claro, reutilizable y fácil de mantener, especialmente en proyectos grandes.

Principios básicos

En arquitectura CSS es importante separar estilos base, layout, módulos y estados. Esto facilita entender cada regla y evita repeticiones innecesarias.

Este ejemplo muestra cómo separar estilos base, layout, módulos y estados en un proyecto simple.

Metodología BEM

BEM (Block, Element, Modifier) es una convención popular que ayuda a escribir CSS escalable y limpio. Los bloques son unidades independientes, los elementos partes de los bloques y los modificadores indican variaciones.

En este ejemplo la sintaxis BEM muestra cómo crear botones en distintos tamaños con iconos.

Consejos para arquitectura CSS

Algunas buenas prácticas ayudan a mantener las hojas de estilo claras y fáciles de mantener.

• Usa convenciones consistentes como BEM para mantener el código entendible.
• Organiza los archivos en carpetas lógicas: base, layout, components, utilities.
• Evita la sobreespecificidad y el uso de !important porque dificulta el mantenimiento.