La cascada es una parte tan intrínseca de CSS que la pusieron allí mismo en el nombre. Si alguna vez ha necesitado usar !important para afectar la especificidad en la cascada, sabrá que puede ser algo complicado de manejar. En los primeros días de CSS, era común ver selectores muy específicos como este:
#sidebar ul li {}Todos somos mucho mejores en la gestión de la especificidad hoy en día. Es una práctica recomendada ampliamente aceptada mantener la especificidad baja y plana: evitar los selectores de ID, hacer un uso liberal de las clases y evitar anidamientos innecesarios. Pero todavía hay muchas situaciones en las que un selector más específico será útil. Con la introducción de una pseudoclase recientemente propuesta, más soporte del DOM en la sombra y el uso del all propiedad, pronto seremos capaces de manejar la herencia y la especificidad de formas nuevas y emocionantes.
El: es una pseudoclase
Lea Verou propuso recientemente esta nueva pseudoclase diseñada específicamente para controlar la especificidad. Ya ha llegado a la especificación de selectores de nivel 4 de CSS. Lea tiene un escrito de por qué es útil y hay algo de cobertura en el almanaque CSS-Tricks.
Echemos :not como ejemplo. La especificidad de :not es igual a la especificidad de su argumento. Esto hace que usar :not bastante doloroso. Tome lo siguiente como ejemplo:
Vea el Pen: no y especificidad por Programar Plus(@ css-tricks) en CodePen.
Podríamos esperar que el .red clase tendría mayor especificidad porque es menor en la cascada. Sin embargo, para que se anule cualquier estilo div:not(.foobar) tendrían que coincidir al menos con la especificidad de un selector de elementos combinados (div) y selector de clases (.foobar). Otro enfoque sería div.red, Pero hay una mejor manera. Aquí es donde :is poder ayudar.
div:is(:not(.foobar)) {
background-color: black;
}El :not selector ya no agrega ninguna especificidad, por lo que la especificidad total del selector anterior es simplemente la del selector de un elemento (div). El .red La clase ahora podría anularlo en la cascada. Una vez implementados, los trucos de especificidad serán cosa del pasado.
DOM de sombra
Hoy en día, muchas personas usan clases en HTML como esta:
<form class="site-search site-search--full">
<input type="text" class="site-search__field">
<button type="Submit" class="site-search__button">search</button>
</form>Cuando use shadow DOM, en lugar de seguir una convención de nomenclatura detallada, podremos omitir las clases por completo. Los estilos definidos dentro del DOM de sombra tienen un alcance para aplicarse solo dentro del componente. El estilo se puede lograr con selectores de elementos simples sin preocuparse por si los selectores interferirán con elementos en otras partes de la página.
Vea Pen shadow dom por CSS GRID (@cssgrid) en CodePen.
Es liberador escribir CSS tan fácil. No más esfuerzo dedicado a nombrar cosas. Shadow DOM parece que finalmente se está abriendo camino hacia la compatibilidad total con el navegador. Es probable que llegue a la próxima versión de Firefox, mientras que Edge tiene la implementación como alta prioridad.
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y posteriores.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 53 | 63 | No | 79 | 10 |
Móvil / Tableta
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 96 | 94 | 96 | 11.0-11.2 |
Toda la propiedad
El all propiedad es una forma de configurar todas las propiedades CSS a la vez, todo desde align-content a z-index. ¿Qué valores acepta? No puedo pensar en ningún caso de uso en el que quisiera que todas las propiedades inherit, pero esa es una opción. Entonces esta initial que es más como aplicar un restablecimiento de CSS donde todos los estilos se han ido. Sin relleno. Sin margen. El valor inicial se establece por propiedad, independientemente del elemento al que se aplique. El valor inicial de display es inline, incluso si lo aplica a un div. El font-style de una em la etiqueta es normal, como es el font-weight de un strong etiqueta. El texto del enlace será negro. Entiendes la idea. (Puede encontrar el valor inicial de cualquier propiedad CSS en MDN). Esto quizás limita su utilidad, yendo más allá de lo que nos gustaría al eliminar todos los estilos, independientemente del contexto.
Vea el Pen todo: inicial por CSS GRID (@cssgrid) en CodePen.
Lamentablemente, el valor más útil para all también es el menos implementado: revert. Puede eliminar los estilos que usted, como desarrollador, ha aplicado, mientras deja intactos los estilos de usuario-agente predeterminados. Todos hemos visto una página de HTML sin una hoja de estilo: Times New Roman negro sobre un fondo blanco (transparente) con enlaces subrayados en azul. Si realmente quiere evitar la herencia, entonces all: revert lo tiene cubierto. Todos los divs serán display: block y los tramos serán inline. Todo em las etiquetas estarán en cursiva y strong las etiquetas estarán en negrita. Los enlaces serán azules y subrayados.
Vea el Pen todo: revertir por CSS GRID (@cssgrid) en CodePen.
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y posteriores.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 84 | 67 | No | 84 | 9.1 |
Móvil / Tableta
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 96 | 94 | 96 | 9.3 |
¿El futuro?
CSS-in-JS es un grito de ayuda. Nosotros en @csswg Debería prestar atención a esto y abordar los problemas antes de que empeoren.
– Lea Verou (@LeaVerou) 24 de mayo de 2017
La mezcla de métodos rivales no estandarizados para escribir CSS-in-JS fue un intento de eludir estos mismos problemas. Ese enfoque ha ganado popularidad en los últimos años. Algunos de sus defensores han considerado la herencia, la cascada y la especificidad como decisiones de diseño fundamentalmente defectuosas del lenguaje. El Grupo de Trabajo de CSS en el W3C está respondiendo mejorando el poder de CSS y la plataforma web nativa. Será interesante ver el resultado …