debugger - error css online
¿Herramienta CSS "Normalizador"? (7)
Necesito mantener y 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 es evidente que 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, ayúdame a generar el archivo CSS más corto que proporciona la misma funcionalidad visual que tengo ahora mismo.
Para aclarar más, no estoy buscando una herramienta que reemplace "# 000000" con "# 000", "0.5em" con ".5em", "blanco" con "#FFF", etc. (esto se refiere a "la cantidad de redundancia 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?
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 sostenible 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ías que hacer esto en primer lugar.
Creo que estás 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 plugin Dust-me Selectors para Firefox para ayudar a localizar los estilos no utilizados, pero hacerlo automáticamente es una tarea larga.
Dicho esto, creo que usar 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.
Echa un vistazo a SASS, es un compilador de CSS con su propio lenguaje y sintaxis, pero tiene capacidad de importación de CSS. http://sass-lang.com/
Me pregunto si solo un ciclo de importación / exportación sería el truco para ti.
Editar: parece que un ciclo de importación / exportación no es suficiente, pero SASS le proporciona las facilidades para hacer su vida más fácil durante la refacturación.
No estoy al tanto de esta herramienta y estoy mirando la complejidad de CSS, ni siquiera estoy seguro de que sea posible resolver esto (algunos estilos CSS están ahí para golpear a los navegadores más antiguos en cumplimiento). 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, debería 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.
Puede probar CSS Tidy ( versión en línea ). Se reducirá la redundancia, se convertirá opcionalmente a estilos abreviados, y se puede usar para crear resultados minificados y resultados bonitos / formateados.
Puedes probar YUI Compressor . Funciona para archivos CSS y Javascript.
Para encontrar CSS duplicados / no utilizados / innecesarios en función de su marcado, puede probar WARI , o Dust-Me Selectors (como se menciona a @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.