Cuando se usa !Important es la elección correcta – CSS
Usar !Important en tu CSS generalmente significa que eres narcisista y egoísta o vago. Respeta a los desarrolladores que vendrán…
Inspiración de Stephanie Rewis
Para aquellos que no lo saben, una regla importante funciona así:
p {
color: red !important;
}
#thing {
color: green;
}<p id="thing">Will be RED.</p>El párrafo será rojo, aunque el selector de ID tiene mayor especificidad. La regla !Important anula esa propiedad en particular.
Stephanie, seguramente por frustración, estaba hablando de cómo publicar sus valores CSS con !Important puede ser muy abusado y hacer que CSS sea complicado y difícil de mantener. El desafortunado caso de uso típico es el siguiente:
- ¿POR QUÉ MI FRAGGLE ROCKING CSS NO FUNCIONA EN INTERROBANG?
- (usa regla !importante)
- OK, ahora está funcionando
Luego aparece la siguiente persona e intenta hacer nuevos cambios. Intenta alterar algunas reglas CSS existentes, pero ahora sus cambios no se comportan como deberían. Él rastrea el problema hasta las reglas !important, luego tiene una opción. Puede intentar eliminarlos e intentar volver a encarrilar las cosas, o agregar algunos más para combatirlos y hacer su cambio. Dado que es posible que no sepa exactamente por qué se agregaron esas reglas importantes en primer lugar, podría optar por la segunda opción por temor a romper algo en otro lugar del sitio que no conoce. Y así comienza el círculo vicioso.
Caso de uso potencialmente bueno: clases de utilidad
Entonces, ¿cuándo la regla !Importante es realmente útil y una buena idea? En mi opinión, las clases de servicios públicos son un buen caso de uso.
Piense en «botones». Supongamos que tiene un nombre de clase de .button en su sitio y cualquier elemento en el que lo coloque, desea que ese elemento se vea como un botón: fuente específica, esquinas redondeadas, fondo y bordes especiales, lo que sea. Entonces haces esto:
.button {
background: red;
color: white;
padding: 3px;
border-radius: 5px;
border: 1px solid black;
}<a class="button" href="#">Do Thing</a>La especificidad para eso es 0,0,1,0. Tan pronto como ese elemento tenga otro selector que lo afecte y que tenga una mayor especificidad, es posible que tenga problemas de estilo. Como:
<section id="content">
<p>text text blah <a href="#" class="button">Do Thing</a></p>
</section>#content a {
border-bottom: 1px dotted blue;
}Ahora esos botones para los que tiene un diseño específico tienen un borde inferior azul punteado, que no es lo que desea. Aquí hay un violín de ese tipo de escenario que está sucediendo.
No creo que esto sea culpa de un CSS descuidado. Es fácil y, a menudo, perfectamente válido escribir un selector de CSS que tiene un valor de especificidad más alto que 0,0,1,0 y estropea accidentalmente un botón.
Para hacer que su clase de botón sea súper robusta y no se juegue fácilmente con ella, establezca reglas importantes sobre los valores. Y tal vez incluso agregue algunos que su botón no necesita pero que podrían arruinarlo.
.button {
background: red !important;
color: white !important;
padding: 3px !important;
border-radius: 5px !important;
border: 1px solid black !important;
/* For good measure */
text-decoration: none !important;
}Cualquier otra «clase de servicios públicos» podría beneficiarse de esto. Piense en la popular clase «clearfix», que utiliza pseudoelementos para hacer lo suyo. Los pseudo-elementos se están volviendo más populares y se están utilizando para más cosas, por lo que sería posible que un selector anule los pseudo-elementos clearfix y que falle el borrado flotante. Es casi seguro que no es lo que desea, por lo que agregar reglas importantes a esas reglas podría ser útil.
Incluso hablé con Nicole Sullivan, quien dijo que agregaría! Reglas importantes a las clases espaciadoras que usa en su marco OOCSS, y es difícil vender esta idea, ya que su estilo de escritura CSS en realidad hace que los selectores de escritura con un mayor especificidad que 0,0,1,0 tipo de raro.
Hojas de estilo de usuario
Creo que el caso de uso original y la razón por la que existen reglas importantes son las hojas de estilo del usuario. Es decir, una hoja de estilo personalizada escrita por usted que le indica al navegador web que aplique a cada página visitada. Esto es particularmente fácil de hacer en un navegador como Safari. Preferencias> Avanzado> Hoja de estilo y seleccione una. En esta hoja de estilo de usuario, puede hacer cosas como ocultar comentarios, ocultar anuncios o intentar sus propias mejoras de legibilidad configurando colores y tamaños en las fuentes.
Dado que estos estilos se aplican a todos los sitios web, no a sitios web específicos, deberá escribir selectores bastante genéricos que tengan más probabilidades de aplicarse a todos los sitios, como body {}. Pero un selector como ese tiene una especificidad muy baja (0,0,0,1) y es probable que sea superado por los estilos propios de un sitio web. Y así, las reglas importantes le permiten escribir selectores genéricos pero aún tienen el poder de cambiar cosas.
¿Otros?
Entonces, ¿qué hay de ustedes, amigos? ¿Tienes algunos casos de uso para !Important que crees que son sólidos? Me interesaría saberlo.