Herramientas y técnicas para refactorizar CSS

Question

Necesito hacer esto de manera más general, pero un buen ejemplo actual son mis dos menús. Tengo dos clases de menú, horizontal-menu y vertical-menu, y dos conjuntos de reglas para elementos como ul, li y a en estas clases. Muchas de estas reglas tienen cosas en común, como el valor color para los elementos a. Me gustaría refactorizar las reglas y valores comunes en una 'superclase' llamada menu, y solo tienen valores de anulación en mis clases horizontal-menu y vertical-menu. ¿Hay alguna herramienta (además de la herramienta que hace esta pregunta) que pueda ayudarme con esto?

Answer 1

La mejor herramienta para este tipo de problema es Compass, un marco para definir reglas que luego se compilan en CSS para su uso en producción. Le permite definir variables de forma muy similar a un lenguaje imperativo.

También tiene otros conceptos útiles como mixins que permiten la definición de un conjunto de propiedades css que se usarían regularmente juntas, de modo que pueda incluir ese bloque de propiedades en varias reglas CSS estándar. El poder es que puedes editar esa mezcla en un solo lugar, cambiando las propiedades y haciendo que ese cambio se propague a cualquier regla de CSS en la que se haya utilizado la mezcla.

descubrí brújula, y aprendieron cómo se debe utilizar gracias a a screencast por Chris Coyier en CSS Tricks

El único problema en este caso (y la mayoría de los casos, de hecho) es que usted realmente tiene que empezar de cero con Brújula o encuentre una forma de integrar su flujo de trabajo en su flujo existente.

Answer 2

Es posible que desee dar una oportunidad a csscss. Lo escribí para tener una idea de cuánto me estoy repitiendo en mis propias hojas de estilo. Obviamente, soy parcial, pero algunas personas también lo han encontrado útil. El soporte SASS, LESS y Compass están integrados.

Otra gran herramienta es helium, que es una herramienta javascript que se ejecuta en el navegador y le permite conocer las reglas no utilizadas.