Al crear una aplicación a gran escala, ¿cómo planifica y estructura su CSS?

Puede utilizar marcos CSS fragmentados como Sass, Less …
Con ellos (Sass es mejor IMO), puede dividir su CSS por componentes (y eventualmente reutilizarlo).
Muestra:

| app.js
| app.scss
| _
El | | _logindialog.js
El | | _logindialog.scss
El |
| _
El | | _preferencepage.js
El | | _preferencepage.scss
| …

Es aún mejor cuando se usa angularjs, particularmente directivas (fragmentos html): cada carpeta contiene .js, .js, .scss, lo que lleva a una especie de bibliotecas de componentes reutilizables web

La forma en que descompone sus archivos css en el desarrollo realmente no importa, porque al final todo se concatenará y comprimirá, luego se enviará un solo archivo.

Hay algunas buenas prácticas generales al escribir CSS que debe seguir sin importar el tamaño del proyecto.

Para comenzar, todo mi CSS ahora está precompilado a través de Sass. Si es nuevo en los precompiladores CSS, le recomiendo usar el sabor SCSS de Sass, ya que puede usar la sintaxis estándar .css mezclada con sus archivos scss mientras aprende el idioma.

Para proyectos de cualquier tamaño, me he acostumbrado a estructurar mis archivos Sass de acuerdo con SMACCS – Arquitectura escalable y modular para CSS. Siempre y cuando tenga un sistema que pueda manejar múltiples niveles de especificidad mientras le proporciona un modelo mental claro de dónde están las clases, estará en una buena posición.

La pregunta importante es “¿Puedo agregar fácilmente nuevas funciones mientras reutilizo tanto como sea posible el CSS actual?”. Si puede ver una manera clara de agregar características no solo hoy, sino después de que el proyecto se amplíe con el tiempo, entonces está en el camino correcto.