lista - etiquetas css
¿Hay alguna manera de encontrar CSS no utilizado en un sitio web? (5)
¿Hay alguna manera de encontrar CSS no utilizado en un sitio web?
Estoy tratando de limpiar un proyecto que acabo de heredar.
Chrome 59 tiene una pantalla de cobertura integrada para CSS y JavaScript desde 2017-04: https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
Puede habilitarlo abriendo las herramientas dev, luego el menú de comandos ( Cmd+Shift+P en Mac o Ctrl+Shift+P en Windows y Linux), y luego escriba "mostrar cobertura".
Hay tanto que se puede decir acerca de los métodos de mejores prácticas para CSS. Intentaré atenerme a los puntos principales.
Utilice un restablecimiento de CSS.
Intente eliminar las declaraciones de CSS realmente generales como h1 {} y #container em {} . Es mucho mejor usar h1.section-title y #container em.important {} , porque de esa manera, si elige usar h1 o em una forma diferente en algún lugar de su documento, no tiene que preocuparse por anular ninguna código existente
No seas demasiado específico en tus selectores de CSS si no tienes que hacerlo. Realmente solo necesitas tener un alto grado de especificidad si estar en una sección específica cambia la forma en que se mostrará el elemento. De lo contrario, para hacer que su código para su clase de block reutilizable, #container .content .block ... podría reducirse a .block ... en muchos casos.
Busque puntos en común en su CSS y vea si puede crear clases reutilizables. Si tiene bloques similares class="favorites" y class="popular" , conviértalo en class="block block-favorites" y class="block block-popular" , y ponga los puntos comunes en .block .
Adquiera el hábito de hacer que las áreas de su CSS tengan un ancho automático (se puede hacer implícitamente) para que crezcan al ancho de sus contenedores. Esto hace que sea increíblemente más fácil mover secciones de una parte estrecha de su sitio web a una parte amplia de su sitio web sin tener que cambiar ningún código.
Comentar su código y dividirlo en secciones generalmente ayuda a que el código sea más legible.
Te sorprendería lo limpio que se ve tu código cuando implementas selectores de CSS más potentes. La mayoría de ellos son compatibles con varios navegadores (Internet Explorer 7 y versiones posteriores).
Algunos recursos valiosos: ¿ Cuándo puedo usar ... ? Modo Quirks en los selectores de CSS - w3 en los selectores de CSS
Respuesta movida de:
Mejores prácticas para limpiar CSS existentes / estilos no utilizados
Me encontré con esto y recordé tu pregunta: http://github.com/geuis/helium-css
Para agregar a la sugerencia de @cweiske, Google Chrome tiene una manera sencilla de descubrir dónde están los selectores "no utilizados" y "nunca se utilizarán".
He publicado una captura de pantalla de cómo iniciar la herramienta de cobertura de CSS con marcadores paso a paso.
Es una forma confiable de averiguar dónde realmente no estás usando cosas.
Dust-me Selectors es un complemento de Firefox que encuentra selectores no utilizados.