font - Filtro de especificidad de CSS
title css style (4)
Esta es una posibilidad remota, pero ¿hay alguna herramienta disponible que optimice los selectores de CSS eliminando la especificidad innecesaria?
Me parece que cuando escribo CSS, deliberadamente hago que mis selectores sean más específicos de lo necesario para evitar conflictos y para la cuasi documentación.
Sería genial si hubiera una herramienta que pudiera analizar un grupo dado de reglas, determinar su "singularidad" en términos de superposición con otras reglas, y luego eliminar cualquier especificidad innecesaria.
Ni siquiera puedo imaginarme cómo un desarrollador de herramientas se acercaría a todos los escenarios que esto requeriría, pero me han impresionado las ingenuidades de otros en esta área antes y pensé que valía la pena preguntar.
Actualizar:
He añadido una recompensa a esta pregunta, y cuanto más lo pienso, más me doy cuenta de lo valioso que sería un filtro de especificidad de CSS .
Por ejemplo, cuando se trabaja con reglas / selectores anidados en Sass y LESS , el anidamiento excesivo es un antipatrón common y well-known que puede conducir fácilmente a selectores demasiado específicos.
Hay una buena ilustración de esto en el excelente curso de TutsPlus. CSS conservable con Sass y Compass :
body {
div.container {
p {
a {
color: purple;
}
}
}
}
Sass seguirá estas instrucciones de anidación y producirá la siguiente salida de CSS, sin objetar ninguna especificación innecesaria:
body div.container p a {
color: purple;
}
Sin embargo, si un filtro de especificidad existiera o existiera, crearía beneficios potenciales para los desarrolladores de CSS:
Podrías organizar tus hojas de estilo como un mapeo 1: 1 del DOM, similar a lo que ves cuando examinas reglas de estilo en Firebug y Chrome Dev Tools. Un editor inteligente / IDE podría completar automáticamente estilos para elementos DOM con estilos / clases compartidos. Esa redundancia entonces, por supuesto, sería filtrada por el filtro de especificidad / optimizador.
Las hojas de estilo pueden tener su estructura previamente poblada por una herramienta que escanea el DOM y lo traduce a selectores / reglas de CSS. Esto significa que un desarrollador solo necesitaría actualizar el HTML; el "árbol" de CSS se mantendría sincronizado para reflejar el estado actual del DOM. Un editor inteligente le permite pasar a la definición de CSS para un elemento / clase para el diseño, o incluso hacer que sus reglas de estilo sean visibles en un panel separado.
En cierto modo, esto casi parece un retroceso, como una característica que encontrarías en Dreamweaver o WebAssist para ayudar a los principiantes a aprender CSS. Pero la idea básica de una herramienta de optimización del selector de CSS parece ser una obviedad, y el tipo de automatización del flujo de trabajo que he descrito sería el próximo paso lógico, y el catalizador sería el filtro de especificidad.
Busqué en algunos de los editores de CSS y IDEs web más conocidos, pero no he encontrado nada que ofrezca este tipo de funcionalidad más allá de la orientación de un solo elemento y la generación de un selector para él.
Actualización 2: rendimiento del selector de CSS
En respuesta al comentario de Spliff, he aquí dos excelentes artículos sobre el rendimiento del selector de CSS:
Repercusión en el rendimiento de los selectores CSS por Steve Souders
Eficientemente renderizado CSS por Chris Coyier
Ambos coinciden en que la micro-optimización de CSS no vale la pena el esfuerzo, pero que los selectores de descendientes sobrecalificados son "un desastre de eficiencia". Aún no he realizado una evaluación comparativa, pero sospecho que el tipo de enfoque de "mapeo DOM" que estoy sugiriendo provocaría un impacto en el rendimiento sin un paso de optimización, ya sea manual o automatizado.
Preguntas relacionadas, enlaces y herramientas:
Puntos en la especificidad de CSS
Herramienta para ver la especificidad de CSS
Herramienta para limpiar CSS
Ordenar por especificidad de CSS
Los 5 errores principales de Massive CSS
De hecho, hay una manera de hacerlo con HTML5 y CSS3. La técnica estándar es especificar elementos utilizando el atributo HTML 5 "data-" y luego hacer la selección de CSS para este atributo. Este no es el objetivo de los atributos, pero puede especificar de forma personalizada algunos elementos que puede usar para cambiar el tema de un sitio.
Entonces, por ejemplo, puede terminar creando sus filtros de especificidad manualmente en CSS, especificando
<b data-specificity=2>test</b>
donde la especificidad de datos solo coincide con los padres anteriores.
ACTUALIZAR:
Muy bien, así que, por ejemplo, supongamos que tienes una clase de párrafo, pero quieres especificar qué padre o cuántos padres heredarán las propiedades del párrafo. Debería usar reglas para cada padre potencial que pueda heredarse de:
p[data-specificity="1"]{
color:red;
font-family:verdana;
text-decoration:underline;
}
p[data-specificity="2"]{
color:black;
font-family:arial;
}
div.container > *[data-specificity="2"] {
font-family:impact;
color:blue;
text-decoration:underline;
}
Por lo tanto, estas reglas significan que cualquier etiqueta p que sea un elemento secundario directo del contenedor div y tenga especificidad 2, puede heredar propiedades del contenedor div. El color azul del div es heredado por el p con especificidad de datos 2.
¡Aquí hay un JSFiddle donde puedes ver esto!
La idea es que, al usar HTML5, pueda controlar exactamente qué elementos pueden heredar qué propiedades. Es mucho código adicional para escribir (tanto para elementos secundarios como secundarios) pero puede usarlo para deshacerse de alguna especificidad innecesaria
Nunca he visto a nadie usar este método en la práctica, simplemente lo preparé para ti, pero creo que podría ser muy útil, ¿qué opinas?
Podría tratar de adoptar un enfoque diferente, intente escribir sus selectores tan pequeños (baja especificidad) como sea posible. y solo hazlos más específicos cuando sea necesario. Con esa forma de trabajar, no necesitas una herramienta.
Realmente no podemos prescindir de la especificidad porque es lo único que lo salva cuando tiene dos o más reglas colisionando. La especificidad brinda cordura a toda la regla de CSS confusa, por lo que es más una bendición que una maldición. Algunas de las cosas de las que habló, como el selector de CSS, se pueden hacer usando Firefox / Firebug. Estoy más molesto por la compatibilidad del navegador.
Simplemente voy a decir esto: no ''contesta'' tu pregunta, pero es una herramienta sobre la que me gusta correr la voz para las personas que hacen mucha programación CSS: Firebug.
Si no está familiarizado con esto, es una herramienta para navegadores web. Levanta su página una vez que está instalada, haga clic derecho y seleccione ''Inspeccionar Elemento''. Le mostrará todos los css que afectan a diferentes elementos en su página, y es útil para crear código css limpio y preciso. También hace que sea más fácil ver actualizaciones instantáneas sobre cómo se vería su página con ligeras modificaciones. Le informará sobre el código css inútil que está siendo anulado por otro código CSS.
¡ADEMÁS! Firebug ahora está disponible para casi todos los navegadores. No solo Firefox. Personalmente, soy partidario de usarlo en Chrome.