sintaxis - qué es una hoja de estilo en css

Herramienta para analizar y comparar dos hojas de estilo CSS

Question

¿Alguien sabe de una buena herramienta que pueda analizar y comparar dos hojas de estilo CSS para encontrar qué selectores tienen estilos diferentes?

No puedo usar una herramienta estándar similar a la diferencia porque los dos archivos CSS tienen un diseño muy diferente. Necesito una herramienta que pueda analizar y comprender el CSS, luego busque los selectores que tengan estilos diferentes en las dos hojas de estilo.

La única herramienta que he encontrado es el Comparador de CSS de Alan Hart , sin embargo, se confunde cuando hay estilos que se aplican a varios selectores.

Answer 1

Esto es lo que terminé haciendo, en caso de que alguien más tenga el mismo problema:

1. CSSTidy para "normalizar" las dos hojas de estilo que quería comparar. La normalización en mi caso significaba dividir varios selectores y clasificar selectores y propiedades. Una versión en línea de CSSTidy está disponible here .
2. Después de esto, usé la herramienta CSS Comparer de Alan Hart para descubrir las diferencias entre las dos hojas de estilo.

Esto hizo el trabajo para mis necesidades específicas.

Answer 2

Intenté usar CSS Compare . Parece hacer exactamente lo que buscas. Sin embargo, parece tener algunos problemas con los selectores múltiples. Lo bueno es que está controlado por la línea de comandos, por lo que puede configurar un proceso automatizado si tiene muchos archivos CSS, o puede encadenar los archivos CSS para compararlos con un archivo SASS gigante. Esta herramienta le mostrará todas las diferencias, incluidas las diferencias en los valores de las clases.

Lo que sería realmente bueno si una herramienta le mostrara qué estilos anularon a otros estilos en la misma hoja de estilo. Muchos sitios antiguos tienen mucho equipaje de esta manera y filtrarlo sería genial. Por supuesto, una herramienta automatizada puede causar problemas, pero al menos algo que genere un informe como lo hace Firebug, excepto por cada selector y por toda la colección de archivos CSS, sería genial. Lamentablemente, CSS Compare no es una herramienta de este tipo, y no conozco una :(

Answer 3

Yo cargaría la página web usando una hoja de estilo en una pestaña y la otra en una pestaña diferente. Luego use el inspector o firebug para verificar el estilo de los nodos pertinentes.

Eso es muy manual, obviamente, pero lo que pides es una banda para un proceso roto que probablemente no encontrarás mucha ayuda.

Si tiene algo de experiencia en programación, probablemente podría escribir un analizador por sí mismo de manera bastante sencilla que informe cada clase definida y su estilo. Sin embargo, eso es probablemente más trabajo entonces vale la pena.

Hágalo manualmente una vez, luego solucione el problema moviéndose a SASS ( http://sass-lang.com/ ) y poniendo una mejor organización en sus sitios web.