¿Cuáles son las implicaciones de usar “! Important” en CSS?

Solución:

Sí, diría su ejemplo de uso !important es una mala práctica y es muy probable que cause efectos no deseados más adelante. Sin embargo, eso no significa que nunca esté bien usarlo.

Qué hay de malo en !important:

La especificidad es una de las principales fuerzas en el trabajo cuando el navegador decide cómo CSS afecta 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 se produce 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 “resaltar”, que son de color azul. Excepto ese único botón 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) se gestiona mediante la especificidad del selector.

!important, sin embargo, se agrega a nivel de propiedad, no a nivel de selector. Si, por ejemplo, usamos esta regla:

button.highlight {
    color: blue !important;
    font-size: 1.5em;
}

entonces la propiedad de 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#buyNow selector, a diferencia del tamaño de fuente (que todavía se rige por la ID regular frente a la especificidad de la 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:

1. El selector no transmite con precisión la importancia de todas las reglas que contiene.
2. los solamente La forma de anular el color azul es usar otro !important declaración, por ejemplo en la button#buyNow selector.

Esto no solo hace que sus hojas de estilo sean mucho más difíciles de mantener y depurar, sino que también genera un efecto de bola de nieve. Uno !important lleva a otro para anularlo, a otro más para anular eso, etcétera. Casi nunca se queda con uno solo. Aunque uno !important puede ser una solución útil a corto plazo, volverá a morderte el trasero a la larga.

Cuándo está bien usar:

• Reemplazo de estilos en una hoja de estilo de usuario.

Esto es lo que !important se inventó en primer lugar: para brindar al usuario un medio para anular los estilos de los sitios web. Se usa mucho en herramientas de accesibilidad como lectores de pantalla, bloqueadores de anuncios y más.

• Anulando el código de terceros y los estilos en línea.

En general, diría que este es un caso de olor a código, pero a veces simplemente no tienes opción. Como desarrollador, debe aspirar a tener el mayor control posible sobre su código, pero hay casos en los que sus manos están atadas y solo tiene que trabajar con lo que esté presente. Usar !important escasamente.

• Clases de servicios públicos

Muchas bibliotecas y marcos vienen con clases de utilidad como .hidden, .error, o .clearfix. Tienen un solo propósito y, a menudo, aplican muy pocas, pero muy importantes, reglas. (display: none para .hidden clase, por ejemplo). Estos deben anular cualquier otro estilo que esté actualmente en el elemento, y definitivamente garantizar una !important si me preguntas.

Conclusión

Utilizando el !important La declaració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.

!important obliga 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, ya no anula la declaración importante.

La mayor parte del tiempo !important puede evitarse porque la especificidad de los selectores controla cuál tiene efecto, que es la idea de estilos en cascada. Sin embargo, hay algunas situaciones (no puedo recordar la exacta) donde la especificidad no es tan lógica y tengo que forzar !important en la declaración.

Razones para no usar / evitar !important?

• evita que los usuarios utilicen hojas de estilo personalizadas (que ahora no pueden anular las reglas que están marcadas como importantes), lo que rompe 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 es !important hace que sea más difícil de leer

Creo que es importante que volvamos a tocar esto, aquí a fines de 2014, cuando se están agregando más reglas al borrador de trabajo, es muy importante no imponer restricciones a sus usuarios. He escrito este pequeño ejemplo para explicar un posible escenario en el que tal cosa ocurre. Esto está tomado de un sitio web REAL que he visitado en la web, y lo veo, lamentablemente, 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, intente ir con un estilo que crea que todos estarán de acuerdo, y dado que sus usuarios visitan principalmente por la noche, usted decide 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 después, los usuarios se quejan de que el blanco sobre negro es demasiado fatigoso para los ojos, pero a la otra mitad le encanta, ¿qué haces? agrega 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, ¿qué pasa aquí? Que esperabas. Si recuerda correctamente las etiquetas! Important en el primer conjunto, se habrá dado cuenta de que no funcionó y probablemente recordará que necesitaba eliminar las etiquetas! Important. PERO te olvidaste de uno …

CORRECTO, obtienes texto blanco sobre fondo blanco, y el usuario ya no puede leer tu página web si intenta usar este nuevo estilo (asumiendo que lo mantuviste).

Por supuesto, no te das cuenta de esto 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).

Hacer y seguir reglas implícitas

Por lo tanto, la regla básica solo debe usarse! Importante al diseñar OVERRIDES a un original completo conjunto 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á utilizarlo 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, corre el riesgo de alienar a sus usuarios al usar la etiqueta! Important! Tenga en cuenta que el estilo no los anulará.

Nunca restrinja a sus visitantes

Si usa! Important en un estilo, asegúrese de hacer posible que el usuario desactive ese estilo (y no me refiero a través del interruptor interno “on / off” del navegador web). Y por el amor de Dios no Hágalo PREDETERMINADO.

Anuncios

La gente usa cada vez menos el estilo para eliminar anuncios, por lo que no creo que proteger los anuncios con! Important realmente sea un problema aquí. Simplemente molestará a alguien que intente personalizar su sitio.

---

---

Utiliza Nuestro Buscador