html - style - cuando usar! propiedad importante en css?

title html css

Question

#div p {
color: red !important;
}
...
#div p {
color: blue;
}

Entiendo cómo !important Trabajos !important , en este caso el div se volverá rojo porque ahora tiene prioridad ( !important ). Pero todavía no puedo descubrir una situación apropiada para usarlo. ¿Alguien sabe algún ejemplo donde !important salva el día?

Answer 1

Este es el escenario de la vida real

Imagina este escenario

1. usted tiene un archivo CSS global que establece los aspectos visuales de su sitio globalmente
2. usted (u otros) usan estilos en línea en los elementos en sí mismos, lo que generalmente es una mala práctica

En este caso, podría establecer ciertos estilos en su archivo CSS global como importantes, anulando los estilos en línea establecidos directamente en los elementos.

Ejemplo real del mundo real?

Este tipo de escenario generalmente ocurre cuando no tienes control total sobre tu HTML. Piense en soluciones en Sharepoint, por ejemplo. Desea que su parte esté definida globalmente (estilo) pero algunos estilos en línea que no puede controlar están presentes. !important hace que estas situaciones sean más fáciles de tratar.

Otros escenarios de la vida real también incluirían algunos plugins jQuery mal escritos que también usan estilos en línea ...

Supongo que ya entendiste la idea y puedes encontrar otras también.

¿Cuándo decides usarlo !important ¿ !important ?

Sugiero que no uses !important menos que no puedas hacerlo de otra manera. Siempre que sea posible evitarlo, evítelo. El uso de muchos estilos !important hará que el mantenimiento sea un poco más difícil, ya que rompe las cascadas naturales en las hojas de estilo.

Answer 2

Sobrescribir el atributo de estilo

Digamos en el ejemplo que no puede cambiar el código fuente HTML pero solo proporciona una hoja de estilo. Alguna persona irreflexiva ha abofeteado un estilo directamente en el elemento (¡abucheo!)

 div { background-color: green !important }

 <div style="background-color:red">
<p>Take that!</p>
</div>

Aquí,! Important puede anular CSS en línea.

Answer 3

El uso de !important es muy importante en la creación de correo electrónico cuando CSS línea es la respuesta correcta. Se usa junto con @media para cambiar el diseño cuando se ve en diferentes plataformas. Por ejemplo, la forma en que la página se ve en el escritorio en comparación con los teléfonos inteligentes (es decir, cambiar la ubicación y el tamaño del enlace) tiene toda la página dentro de un ancho de 480px como apposed a 640px ancho.

Answer 4

Es !important invalidar una propiedad de css , por ejemplo, usted tiene un control en asp.net y representa un control con un fondo azul (en el html) y desea cambiarlo y no tiene el control de fuente para que usted adjunte un nuevo archivo css y escriba el mismo selector y cambie el color y luego agregue! important.

Best Practes es cuando marcas / rediseñas los sitios de SharePoint, lo usas mucho para anular los estilos predeterminados

Answer 5

Este es un ejemplo del mundo real.

Al trabajar con GWT-Bootstrap V2, se inyectará algún archivo CSS, que anulará mis estilos CSS. Para hacer que mis propiedades no sean anuladas, ¡utilicé !important

Answer 6

Este es un escenario real , de la vida real, porque en realidad sucedió ayer:

• Problema del índice Z en el diálogo de jquery. La lista de Autosuggest no se muestra correctamente

¡Alternativas a no usar !important en mi respuesta incluida:

• Buscar en JavaScript / CSS donde se estaba aplicando una determinada propiedad difícil de alcanzar.
• Agregar la propiedad con JavaScript, que es un poco mejor que usar !important .

Entonces, un beneficio de !important es que a veces ahorra tiempo. Si lo usa muy poco como este, puede ser una herramienta útil.

Si lo estás usando solo porque no entiendes cómo funciona la especificidad , lo estás haciendo mal.

Otro uso para !important es cuando estás escribiendo algún tipo de cosa tipo widget externo, y quieres asegurarte de que tus estilos serán los aplicados, mira:

• Problema de CSS del control agregado

Answer 7

Estoy planeando utilizar! Importante para un widget de terceros que está destinado a ser incrustado en una gran cantidad de sitios web fuera de mi control. ¡Llegué a la conclusión! Important es la única solución para proteger la hoja de estilo del widget de la hoja de estilos del host (aparte de los estilos iframe y en línea, que son igualmente malos). Por ejemplo, Wordpress usa:

#left-area ul {
list-style-type: disc;
padding: 0 0 23px 16px;
line-height: 26px;
}

Esta regla amenaza anular cualquier UL en mi widget porque el ID tiene una gran especificidad. En ese caso, el uso sistemático de! Importante parece ser una de las pocas soluciones.

Answer 8

Estoy usando! Importante cambiar el estilo de un elemento en una parte web de SharePoint. El javascript que crea los elementos en la parte web está enterrado a muchos niveles en el funcionamiento interno compartido. Tratar de encontrar dónde se aplica el estilo y luego intentar modificarlo me parece una gran pérdida de esfuerzo. Usar la etiqueta! Important en un archivo CSS personalizado es mucho, mucho más fácil.

Answer 9

Estrictamente hablando, ¡no deberías usar! Importante si has estructurado bien tu CSS y no tienes demasiados grados de especificidad.

El momento más adecuado para utilizarlo es importante cuando tiene un estilo excepcional que desea diseñar fuera de la cascada normal de su sitio.

Answer 10

Por lo general, es importante cuando se te agotan otras formas de aumentar la especificidad de un selector de CSS.

Entonces, una vez que otra regla de CSS ya ha incursionado con Ids, rutas de herencia y nombres de clase, cuando necesita anular esa regla, entonces necesita usar ''importante''.

Answer 11

Usar !important generalmente no es una buena idea en el código en sí, pero puede ser útil en varias modificaciones.

Uso Firefox y un plugin dotjs que esencialmente puede ejecutar su propio código JS o CSS personalizado en sitios web específicos automáticamente.

Aquí está el código que uso en Twitter que hace que el campo de entrada de tweets siempre permanezca en mi pantalla sin importar cuánto me mueva, y que los hipervínculos permanezcan siempre del mismo color.

a, a * {
color: rgb(34, 136, 85) !important;
}
.count-inner {
color: white !important;
}
.timeline-tweet-box {
z-index: 99 !important;
position: fixed !important;
left: 5% !important;
}

Dado que, afortunadamente, los desarrolladores de Twitter no usan mucho las propiedades !important , puedo usarlo para garantizar que los estilos especificados serán definitivamente anulados, porque sin ellos no se anulan a veces. Realmente fue útil para mí allí.

Answer 12

tengo que usar !important cuando necesito sobrescribir el estilo de un HTML generado por algún "plugin" de JS, (como publicidad, pancartas y demás) que usa el atributo "estilo".

Así que supongo que puedes usarlo cuando no controlas el CSS.

Answer 13

!important es algo así como eval . No es una buena solución para ningún problema, y ​​hay muy pocos problemas que no pueden ser resueltos sin él.