¿Cuáles son las implicaciones de usar "!important" en CSS? [duplicar]
He estado trabajando en un sitio web durante algunos meses y muchas veces, cuando intento editar algo, tengo que usar !important, por ejemplo :
div.myDiv {
width: 400px !important;
}
para que se muestre como se esperaba. ¿Es esta una mala práctica? !important¿O está bien usar el comando? ¿Puede esto causar algo no deseado más adelante?
Sí, diría que su ejemplo de uso !importantes una mala práctica y es muy probable que cause efectos no deseados en el futuro. Sin embargo, eso no significa que nunca esté bien usarlo.
Qué hay de malo en !important:
La especificidad es una de las principales fuerzas que intervienen cuando el navegador decide cómo afecta CSS a la página. Cuanto más específico es un selector, más importancia se le añade. Esto suele coincidir con la frecuencia con la que aparece el elemento seleccionado. Por ejemplo:
button {
color: black;
}
button.highlight {
color: blue;
font-size: 1.5em;
}
button#buyNow {
color: green;
font-size: 2em;
}
En esta página, todos los botones son negros. Excepto los botones con la clase "highlight", que son de color azul. Excepto ese botón único con el ID "buyNow", que es verde. La importancia de toda la regla (tanto el color como el tamaño de fuente en este caso) depende de la especificidad del selector.
!important, sin embargo, se agrega a nivel de propiedad, no a nivel de selector. Si, por ejemplo, usáramos esta regla:
button.highlight {
color: blue !important;
font-size: 1.5em;
}
entonces la propiedad del color tendría mayor importancia que el tamaño de fuente. De hecho, el color es más importante que el color en el button#buyNowselector, a diferencia del tamaño de fuente (que todavía se rige por la especificidad de ID normal versus clase).
Un elemento <button class="highlight" id="buyNow">tendría un tamaño de fuente de 2em, pero un color blue.
Esto significa dos cosas:
- El selector no transmite con precisión la importancia de todas las reglas que contiene.
- La única forma de anular el color azul es utilizar otra
!importantdeclaración, por ejemplo en elbutton#buyNowselector.
Esto no sólo hace que sus hojas de estilo sean mucho más difíciles de mantener y depurar, sino que también inicia un efecto de bola de nieve. Uno !importantlleva a otro para anularlo, a otro más para anularlo, etcétera. Casi nunca se queda con uno solo. Aunque una !importantpuede ser una solución útil a corto plazo, a la larga volverá en tu contra.
¿Cuándo está bien usar?
- Anulación de estilos en una hoja de estilos de usuario.
Para esto se !importantinventó en primer lugar: brindarle al usuario un medio para anular los estilos del sitio web. Lo utilizan mucho herramientas de accesibilidad como lectores de pantalla, bloqueadores de anuncios y más.
- Anulación de códigos de terceros y estilos en línea.
Generalmente diría que este es un caso de olor a código, pero a veces simplemente no tienes otra opción. Como desarrollador, debes intentar tener el mayor control posible sobre tu código, pero hay casos en los que tienes las manos atadas y sólo tienes que trabajar con lo que esté presente. Utilizar !importantcon moderación.
- Clases de utilidad
Muchas bibliotecas y marcos vienen con clases de utilidad como .hidden, .erroro .clearfix. Tienen un único propósito y, a menudo, aplican muy pocas reglas, pero muy importantes. ( display: nonepara una .hiddenclase, por ejemplo). Estos deberían anular cualquier otro estilo que haya actualmente en el elemento y, !importantsi me preguntas, definitivamente justifican una opción.
Conclusión
El uso de la !importantdeclaración a menudo se considera una mala práctica porque tiene efectos secundarios que interfieren con uno de los mecanismos centrales de CSS: la especificidad. En muchos casos, su uso podría indicar una arquitectura CSS deficiente.
Hay casos en los que es tolerable o incluso preferido, pero asegúrese de verificar que uno de esos casos realmente se aplique a su situación antes de usarlo.
!importantobliga a que la declaración se aplique siempre, haciendo estas cosas:
- Incluso si el selector es menos específico y de menor nivel, ahora supera a los selectores de mayor especificidad.
- Si hay más apariciones de esa declaración que normalmente anularían esa declaración, ya no anula la declaración importante.
La mayoría de las veces, !importantse puede evitar porque la especificidad de los selectores determina cuál tiene efecto, que es la idea de los estilos en cascada. Sin embargo, hay algunas situaciones (no recuerdo exactamente cuál) en las que la especificidad no es tan lógica y tengo que forzar !importantla afirmación.
¿Razones para no usar/evitar !important?
- impide que los usuarios utilicen hojas de estilo personalizadas (que ahora no pueden anular las reglas marcadas como importantes), lo que interrumpe la accesibilidad para algunas personas
- Hace que el código sea más difícil de leer porque la mente normalmente toma la especificidad con bastante facilidad, pero recordar lo que
!importanthace que sea más difícil de leer.
Creo que es importante que volvamos a abordar esto a finales de 2014, cuando se agreguen más reglas al borrador de trabajo, es muy importante no imponer restricciones a los usuarios. He escrito este pequeño ejemplo para explicar un posible escenario en el que ocurre algo así. Esto está tomado de un sitio web REAL que he visitado en la web y, lamentablemente, lo veo la mayoría de las veces.
Campos del editor de texto de formulario
Tiene un sitio web y su sitio web depende de completar formularios y editar texto. Para tratar de minimizar la fatiga visual, intenta utilizar un estilo con el que creas que todos estarán de acuerdo y, dado que tus usuarios visitan principalmente de noche, decides hacer que el color de fondo sea blanco y luego hacer que el color del texto sea negro. . El formulario está en blanco de forma predeterminada, por lo que escribe texto (esta vez) para asegurarse de que funcione:
...
background-color: black; /* I forgot important here, but it works fine on its own */
color: white !important;
...
Unos meses más tarde , los usuarios se quejan de que el blanco sobre negro cansa demasiado la vista, pero a la otra mitad le encanta, ¿qué haces? agregas un tema personalizado que usa! Importante para anular los estilos internos para que AMBAS partes estén contentas, que es para lo que SE SUPONE que debe usarse:
...
background-color: white !important;
color: black !important;
...
Ahora bien, ¿qué pasa aquí? Que esperabas . Si recuerda correctamente las etiquetas !importantes del primer conjunto, habrá notado que no funcionó y probablemente haya recordado que necesitaba eliminar las etiquetas !importantes. PERO te olvidaste uno..
CORRECTO, obtienes texto blanco sobre fondo blanco y el usuario ya no puede leer tu página web si intenta utilizar este nuevo estilo (suponiendo que lo hayas conservado).
Por supuesto, no te das cuenta porque el cuadro de texto está vacío. ¡Y ASUMES que funcionará! (La suposición es el peor enemigo de un desarrollador, está a la altura del orgullo y la arrogancia).
Crear y seguir reglas propias
Por lo tanto, la regla básica debe ser solo usar !importante al diseñar OVERRIDES a un conjunto completo original de reglas CSS. Recuerde que está destinado a excepciones y, en primer lugar, altera el orden natural y el significado de CSS. En la MAYORÍA de los casos, no necesitará usarlo en absoluto.
Sepa cómo los usuarios personalizan sus colores
Con la existencia de herramientas como extensiones y la presencia de sitios como 'userstyles.org' y su elegante contraparte, corres el riesgo de alienar a tus usuarios al usar la etiqueta !important. Tenga en cuenta que el estilo no los anulará.
Nunca restrinjas a tus visitantes
Si usa !important en un estilo, asegúrese de permitir que el usuario desactive ese estilo (y no me refiero a través del interruptor interno de "encendido/apagado" del navegador web). Y, por el amor de Dios, no lo hagas POR DEFECTO.
Anuncios
La gente usa cada vez menos estilo para eliminar anuncios, por lo que no creo que proteger los anuncios con !important sea realmente un problema aquí. Simplemente molestará a alguien que intente personalizar su sitio.
Un poco tarde para esta pregunta, pero dice " no importa qué otros estilos se apliquen, ignórelos y use este ". Puede que le resulte un poco confuso con el !frente (de !important) porque es un operador not en javascript, pero en CSS se llama token delimitador y solo dice que se debe tener prioridad. He aquí un ejemplo.
Sin!important :
.set-color{
color: blue;
}
.set-color{
color: red;
}
salidas ROJA
!importanten el atributo inferior (del mismo)
.set-color{
color: blue;
}
.set-color{
color: red !important;
}
salidas ROJA (habría sido roja de todos modos)
!importanten el atributo superior (del mismo)
.set-color{
color: blue !important;
}
.set-color{
color: red;
}
salidas AZUL (dice ignorar el rojo, usar azul)
