CSS Herramienta "Normalizador"?

Question

Necesito mantener & mejorar un sitio web existente y me estoy ahogando en la redundancia que he descubierto en su hoja de estilo CSS. Dada la redundancia existente y el orden lógico no metodológico de los elementos, es difícil rastrear y predecir cómo se propagará un cambio menor a través del sistema, o dónde aplicar un cambio para lograr un cierto efecto, sin perder mucho tiempo reaprendiendo el Archivo CSS y experimentando.

He estado usando los últimos complementos Firebug y "Web Developer" para Firefox, pero claramente no son suficientes para mí. Necesito una herramienta que pueda decirme dónde están las "anulaciones" redundantes y tal vez sugerir un mejor esquema en cascada.

En otras palabras, me ayudan a generar el archivo CSS más corto que proporciona la misma funcionalidad visual exacta que tengo en este momento.

Para aclarar más, no estoy buscando una herramienta que reemplace "# 000000" con "# 000", "0.5em" con ".5em", "blanco" con "#FFF", etc. (esto aborda la redundancia de "número de caracteres", pero no aborda la redundancia de "lógica en cascada"). Estoy buscando una herramienta que pueda decirme, por ejemplo, que un atributo "font-size: 10px" de un elemento secundario es redundante porque ya se ha heredado de su elemento primario.

Una característica más avanzada: el atributo "color: # 000000" de una clase o una identificación es redundante porque no se usa en ninguno de los archivos HTML/PHP en el sitio web.

¿Hay alguna herramienta que realice este tipo de "normalización" automáticamente?

Answer 1

Para encontrar duplicado CSS/sin usar/innecesaria sobre la base de su margen de beneficio, usted puede probar , o Dust-Me Selectors (como se ha mencionado @Aaron D), o CSS Crunch. Las dos últimas son extensiones de navegador (para Firefox e IE, respectivamente), que solo se mostrarán en una página, mientras que WARI está destinado a examinar un sitio completo. Sin embargo, no he tenido mucha suerte en lograr que WARI funcione.

Answer 2

Puedes probar YUI Compressor. Funciona para archivos CSS y Javascript.

Answer 3

Puede probar CSS Tidy (online version). Se reducirá la redundancia, se convertirá opcionalmente a estilos abreviados, y se puede usar para crear resultados minificados y resultados bonitos/formateados.

Answer 4

No conozco esta herramienta y, viendo la complejidad de CSS, ni siquiera estoy seguro de que sea posible solucionar esto (algunos estilos CSS están ahí para lograr que los navegadores más antiguos cumplan). Entonces, ¿cuánto valor tiene una herramienta que crea un nuevo CSS compatible con W3C que no se representa en la mayoría de los navegadores debido a errores?

Dicho esto, debe echar un vistazo a Envjs que le permite leer una página web en un navegador emulado y luego examinar el resultado. No es perfecto, pero podría ayudarte a empezar.

Answer 5

Echa un vistazo a SASS, es un compilador CSS con su propio lenguaje y sintaxis, pero tiene capacidad de importación de CSS. http://sass-lang.com/

Me pregunto si un solo ciclo de importación/exportación sería el truco para usted?

Editar: Parece que un ciclo de importación/exportación no es suficiente, pero SASS le proporciona instalaciones para hacer su vida más fácil durante la refabricación.

Answer 6

Creo que está buscando el santo grial de CSS. No creo que exista El problema es que nunca se sabe exactamente lo que el navegador va a procesar y necesita en su hoja de estilo. He usado el complemento Dust-me Selectors para Firefox para ayudar a localizar estilos no utilizados, pero hacerlo automáticamente es una tarea larga.

Dicho esto, creo que el uso de un marco como SASS (como ya se mencionó) o LESS es una respuesta redonda a su pregunta.Los frameworks eliminan mucha redundancia y hacen que su CSS sea compacto. Me gusta MENOS sobre SASS debido a las similitudes con CSS.

Answer 7

Aaron hace una buena observación sobre la complejidad. Por ejemplo, tal herramienta necesitaría acceso no solo a los archivos CSS, sino también al HTML (de lo contrario, no podría determinar cosas como la herencia). ¿Está buscando algo que arañe un sitio completo y tome todas las páginas en cuenta, o se puede proporcionar el marcado desde los archivos?

También es probable que una herramienta de este tipo produzca CSS que sea menos mantenible de lo que produciría un diseñador web decente (estoy pensando en acortar los selectores que luego podrían necesitar ser 'alargados' en una fecha posterior). No hay problema si esto es solo una acción temporal, pero me pregunto por qué tendrían que hacer esto en primer lugar.