2012-05-24 22 views
19

Probablemente cualquier desarrollador web con experiencia esté familiarizado con este problema: con el tiempo, sus archivos CSS pueden crecer bastante y ser feos debido a todos los selectores que ya no se utilizan, lo cual puede ser bastante difícil de encontrar. Estoy trabajando en un proyecto de rieles donde tendemos a rediseñar las cosas con bastante frecuencia, lo que lleva a una tonelada de css de peso muerto. ¿Cuál es la mejor manera de encontrarlo y eliminarlo?css sin usar: ¿cómo se limpia?

Ahora, sé que hay un complemento de rieles llamado peso muerto creado específicamente para ese propósito. Sin embargo, aquí está mi problema con el peso muerto: en primer lugar, ignora por completo los selectores utilizados en JavaScript. A continuación, escanea solo las páginas que configura para escanear, lo que significa que existe el riesgo de eliminar algo que se utiliza en páginas que no escaneó por algún motivo. Finalmente, encuentra los selectores no utilizados solo en el css compilado (utilizamos LESS); emparejarlos con el código real es un poco complicado.

También he intentado http://unused-css.com/ - son geniales, pero no pueden acceder a localhost y, nuevamente, solo pueden escanear CSS compilados.

Realmente creo que debe haber una forma mejor de hacerlo. En realidad, hace algún tiempo decidí optimizar un archivo css en particular al agrupar cada selector en el directorio completo del proyecto (el modo emacs + rinari lo hace súper fácil y súper rápido), y cada vez que no veía ningún html o css en los resultados eliminé el estilo. Cero problemas, funcionó como un encanto. Obviamente, no voy a hacer eso para todo el sitio. Sin embargo, realmente no creo que esto no pueda ser automatizado. Ahora, antes de encender mi pitón y codificar esto, ¿alguien puede decirme realmente si estaría reinventando la rueda?

+1

¿Alguna vez ha codificado esto? Estoy buscando algo similar. – Barney

+0

No estoy seguro de si me falta algo, pero no importa si analiza el CSS compilado, un selector no utilizado es un selector no utilizado, ya sea MENOS o simple CSS. –

+0

ha pasado un tiempo ... Terminó cambiando de trabajo, se mudó a una plataforma diferente y por una serie de razones nunca más tuvo que lidiar con este problema nuevamente. Por lo tanto, nunca pude escribir el guión :(lo siento muchachos –

Respuesta

12

Consulte uCSS library de Opera Software.

Le ayuda a encontrar CSS no utilizados, así como duplicar CSS. Además, puede obtener una descripción general de cuántas veces se ha utilizado cada regla en su marcado. Hay varias opciones disponibles configurando un archivo de configuración.

Actualización:

Otra gran alternativa: csscss.

Escrito en Ruby y compatible con SASS, Less.

Actualización:

Otra gran alternativa: uncss.

Funciona en varios archivos y es compatible con Javascript inyectado CSS.

+0

+1 esa es una gran herramienta y la mejor solución a este problema que he visto hasta ahora. – steveax

+0

No es exactamente lo que estaba buscando, pero de hecho la mejor solución para todo lo que he visto –

+0

csscss es una gran herramienta, pero afak solo encuentra CSS css no utilizados, css no utilizados – Kyle

2

Dust Me Selecters y/o CSS Usage Las extensiones de Firefox pueden ayudarlo a descartar CSS no utilizados.

En las Herramientas para desarrolladores de Chrome, puede usar la herramienta Rendimiento de la página web para encontrar reglas de CSS no utilizadas.

+2

Eso es bueno pero no perfecto: ambos solo podrían trabajar con CSS compilados, mientras que yo preferiría una herramienta que pueda pasar por archivos LESS y hacer el trabajo –

+0

Interesante.No estoy al tanto de nada que pueda rastrear esto de nuevo a precompilado ... Tal vez estás en algo. Uno podría potencialmente usar las herramientas existentes para detectar el CSS no utilizado y luego calcular el LESS/SASS relevante desde allí. Si decides hacer esto en un proyecto agrégame en GitHub. – TomDunning

Cuestiones relacionadas