En LayerVault, escribimos nuestro CSS muy específicamente. Después de un largo tiempo en las trincheras de CSS y otras bondades de front-end, creo que tenemos la mejor manera de hacerlo.
Usamos la biblioteca Sprockets, que está basada en Ruby, pero podría ser modificada en el idioma que elija. La idea de canalización CSS se ve de la siguiente manera:
Archivos de nivel superior
- ¿Qué idioma debo aprender después de JavaScript?
- ¿Cuál es la diferencia entre la aplicación web y el desarrollo web?
- ¿Qué quieren ver los empleadores en una cartera completa de desarrollo de JavaScript?
- ¿Cuál es la mejor manera de definir una hoja de estilo específica de Chrome?
- ¿Por qué las personas usan React y Angular en el mismo extremo?
Define algunos archivos a nivel de aplicación. Estos podrían ser external.css e internal.css por ejemplo. Todos los demás archivos están incluidos por estos dos archivos.
Archivos incluidos
A medida que escribe su HTML y su información de estilo, comienza a escribir su CSS lo más específico posible. Cada elemento principal (botón, lista de la barra lateral) obtiene su propio archivo css. Tenemos archivos CSS con solo 2 reglas muy específicas a veces. En general, cada plantilla HTML obtiene su propio archivo CSS.
A medida que se encuentra copiando y pegando código de archivos CSS, mueve esa regla un nivel hacia arriba. Por ejemplo, si button.css define una clase CSS que se usa en otro lugar, muévala a su padre, internal.css .
Boom, tus problemas de CSS se han ido. Encontrar reglas específicas es fácil ahora. Su CSS tiene la misma separación lógica que (con suerte) su JS y el código de la aplicación.
Despliegue
En la implementación, obviamente querrás concatenar y minificar tus archivos CSS.
Voila, CSS sin dolor de cabeza.
