Forma estructurada para organizar el código CSS

Question

Al construir un sitio web relativamente grande, la estructura CSS debe tener un ámbito y organizarse correctamente desde el principio. Si no se utiliza un marco CSS, todo se puede agrupar en una hoja de estilo masiva, pero esto se pondrá rápidamente fuera de servicio y puede convertirse en una gran responsabilidad de mantenimiento.

En los últimos años, he dividido mis hojas de estilo en varios archivos, incluyendo: base.css, layout.css, fonts.css, elements.css, pero muy fácilmente las definiciones de estilo pueden saltar entre archivos y este enfoque necesita ser más estricto No he usado un framework porque no soy fanático de las columnas preestablecidas y los elementos predefinidos en mi código CSS.

¿Qué enfoques, patrones o consejos pueden sugerirnos para mantener las cosas organizadas? ¿Qué tipos de convenciones de nombres, prácticas de reutilización y patrones son útiles? ¿Es esto algo para lo que debería usarse un marco?

Answer 1

Me encantaba LESS, pero ahora soy un gran fan de Stylus porque creo que hace que el código más limpio que incluso MENOS/SASS/CSS - no hay punto y coma, dos puntos o soportes.

Debido Stylus (y menos y SASS) le permiten definir las variables y plantillas y funciones, tengo los siguientes archivos, que debe ser en este orden:

• reinicio - Una versión Stylus de Eric Meyer's CSS reset
• las variables - Variables como colores, fuentes, etc.
• plantillas - plantillas como border-radius, transiciones y cLEARfix
• estilos de página para cada página (, aplicación, los términos de servicio, etc.)

Todos estos están concatenados y compilados en CSS utilizando un simple script de compilación.

Puede ver cómo se ven; Hice a GitHub repo para esto.

Answer 2

Para escribir hojas de estilo consistentes y manejables CSS LESS Framework es muy beneficioso.
LESS proporciona los siguientes mecanismos: variables, anidamiento, mixins, operadores y funciones para escribir códigos CSS dinámicamente y puede ejecutarse en el lado del cliente (Internet Explorer 6+, WebKit, Firefox) y en el lado del servidor, con Node.js o Rinoceronte.

http://lesscss.org/

Answer 3

Respecto a Stylus: la falta de puntos y comas, dos puntos y corchetes hace que su código sea menos legible que IMO, en lugar de más.