html - selectores - ¿Cuáles son las implicaciones de usar "! Important" en CSS?

important css que es

Question

He estado trabajando en un sitio web durante unos meses, y muchas veces cuando he estado tratando de editar algo, tengo que usarlo !important , por ejemplo :

div.myDiv {
width: 400px !important;
}

para hacer que se muestre como se esperaba ¿Es esta mala práctica? ¿O está bien el comando !important de usar? ¿Puede esto causar algo indeseado más adelante en la línea?

Answer 1

Bueno, creo que usar !important es a veces "imprescindible hacer trabajo" si quieres sobreescribir las propiedades predeterminadas de wp-plugins.

Lo usé solo hoy y era la única forma de terminar mi trabajo. Tal vez no sea una buena forma de hacer algo, pero en algún momento es la única forma de hacerlo.

Answer 2

Creo que es importante que toquemos esto nuevamente, aquí a finales de 2014, cuando se agreguen más reglas al borrador de trabajo, es tan importante no imponer restricciones a los usuarios. He escrito este pequeño ejemplo para explicar un posible escenario en el que ocurre tal cosa. Esto se toma 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

Usted tiene un sitio web y su sitio web depende de completar formularios y editar texto. Para tratar de minimizar la fatiga ocular, intente ir con un estilo que crea que todos estarán de acuerdo, y dado que sus usuarios lo visitan principalmente por la noche, decida que el color de fondo sea blanco y luego haga que el color del texto sea negro . El formulario está en blanco de forma predeterminada, por lo que debe escribir el texto (esta vez) para asegurarse de que funciona:

...
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 es demasiado agotador pero la otra mitad lo ama, ¿qué haces? agrega un tema personalizado que utiliza! importante para anular los estilos internos para que ambas partes estén contentas, que es lo que se SUPONE para que se use:

...
background-color: white !important;
color: black !important;
...

Ahora, ¿qué pasa aquí? ¿Qué esperabas ? Si recuerda correctamente las etiquetas! Importantes en el primer conjunto, se habría dado cuenta de que no funcionaba y probablemente recordara que tenía que eliminar las etiquetas! Importantes. PERO te olvidaste uno ...

CORRECTO, obtiene texto blanco sobre fondo blanco, y el usuario ya no puede leer su página web si intentan usar este nuevo estilo (suponiendo que lo haya guardado).

Por supuesto, no se da cuenta de esto porque el cuadro de texto está vacío. ¡Y USTED ASUME que funcionará! (La suposición es el peor enemigo de un desarrollador, está ahí arriba con orgullo y arrogancia).

Hacer y seguir reglas auto implícitas

Por lo tanto, la regla básica debe ser solo un uso importante al diseñar OVERRIDES a un conjunto completo original de reglas css. Recuerde que está destinado a excepciones y perturba el orden natural y el significado de css en primer lugar. 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 las extensiones y la presencia de sitios como ''userstyles.org'' y su elegante contraparte, se corre el riesgo de alienar a los usuarios mediante el uso de la etiqueta! Important. Tenga en cuenta que con estilo no los anulará.

Nunca restrinja a sus visitantes

Si utilizas! Importante en un estilo, asegúrate de que el usuario pueda desactivar ese estilo (y no me refiero al interruptor interno "on / off" del navegador web). Y por el amor de Dios , no lo hagas POR DEFECTO.

Anuncios

Las personas usan cada vez menos el estilo para la eliminación de anuncios, por lo que no creo que proteger los anuncios con! Importante realmente sea un problema aquí. Solo molestará a alguien que intente personalizar su sitio.

Answer 3

No le aconsejaría que lo use a menos que sea una necesidad, que a veces podría ser el caso con usted, ya que está trabajando en un proyecto existente. Pero trata de mantenerte alejado de ella y usar lo menos importante posible.

El problema es que si usa demasiados de ellos, uno podría sobrescribir el otro sin quererlo. Su código también es mucho menos legible y cualquiera que lo persiga para mantenerlo rasgará su cabello, como tratar de encontrarlo. Es importante que cada vez que haga algo en el CSS sea un dolor real.

Mira esto: http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

Answer 4

Para mí, usar !important es una mala práctica de CSS. Interrumpe el flujo natural en la aplicación de las reglas CSS, donde las propiedades se aplican de arriba a abajo. Con !important , la propiedad ahora dará prioridad al último valor importante.

Es como usar la palabra clave goto en las secuencias de comandos. Aunque es perfectamente legal, es mejor evitarlo.

Answer 5

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

¿Qué pasa con !important :

Specificity es una de las principales fuerzas en el trabajo 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 agrega. Esto generalmente coincide con la frecuencia con 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 azules. 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 letra en este caso) se gestiona por 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 del color tendría una importancia mayor que el tamaño de la fuente. De hecho, el color es más importante que el color en el button#buyNow selector, en comparación con el tamaño de fuente (que todavía se rige por la identificación regular frente a la especificidad de 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 refleja con precisión la importancia de todas las reglas dentro de él
2. La única manera de anular el color azul es usar otra declaración !important , por ejemplo, en el 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 a anularlo, a otro a anularlo, etcétera. Casi nunca se queda con solo uno. A pesar de que una de las cosas !important puede ser una solución útil a corto plazo, volverá a morderte a la larga.

Cuándo está bien usar:

• Anulación de estilos en una hoja de estilo del usuario.

En primer lugar, se inventó esto: importante para dar al usuario un medio para anular los estilos del sitio web. Se usa mucho con herramientas de accesibilidad como lectores de pantalla, bloqueadores de anuncios y más.

• Anulación de código de terceros y estilos en línea.

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

• Clases de utilidad

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

Conclusión

El uso de la declaración !important menudo se considera una mala práctica porque tiene efectos secundarios que alteran uno de los mecanismos centrales de CSS: la especificidad. En muchos casos, usarlo podría indicar una arquitectura CSS pobre.

Hay casos en los que es tolerable o incluso preferido, pero asegúrese de verificar dos veces que uno de esos casos realmente se aplica a su situación antes de usarlo.

Answer 6

Un poco tarde a esta pregunta, pero está diciendo " no importa qué otros estilos se apliquen, ignórelos y use este ". ¡Puede encontrarlo un poco confuso con el ! enfrente (del !important ) porque eso no es un operador en javascript pero en css se llama un token delimitador que solo dice que tiene prioridad. Aquí hay un ejemplo.

Sin !important :

.set-color{
color: blue;
}
.set-color{
color: red;
}

salidas ROJO

!important en el atributo inferior (de lo mismo)

.set-color{
color: blue;
}
.set-color{
color: red !important;
}

salidas ROJO (habría sido rojo de todos modos)

!important en el atributo superior (de lo mismo)

.set-color{
color: blue !important;
}
.set-color{
color: red;
}

salidas AZUL (dice ignorar rojo, usar azul)

Answer 7

!important fuerza la afirmación de aplicar 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 otras ocurrencias de esa declaración que normalmente anularían esa, no anula la declaración importante más

La mayoría de las veces !important se puede evitar porque la especificidad de los selectores maneja cuál tiene efecto, que es la idea de estilos en cascada. Sin embargo, hay algunas situaciones (no puedo recordar exactamente la) donde la especificidad no es tan lógica y tengo que forzar !important en la declaración.

Razones para no usar / evitar !important ?

• impide que los usuarios usen 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 más difícil de leer