Cualquier característica en las manos "torcidas" se vuelve mala. El importador no es la excepción. Lo malo no es lo que él sabe, sino la forma en que lo usan.
¡Cómo funciona! Importante
En CSS, utilizamos el mecanismo de especificidad para priorizar estilos. Escribimos cascadas o selectores complejos, aumentamos el peso del selector, lo que indica al navegador la prioridad de algunos estilos sobre otros.
Por ejemplo:
.content .title { color: red; } .title { color: blue; }
En este caso, a pesar del hecho de que el color azul se aplica al encabezado después del rojo, como resultado todavía obtendremos un encabezado rojo. Debido a que el primer selector es más específico (si de repente no está familiarizado con esto, no lea más; solo empeorará,
es mejor
aquí y aprenderá especificidad).
Entonces, usando el mismo ejemplo, pero con! Importante, de repente descubrimos que a él no le importa tu especificidad.
.content .title { color: red; } .title { color: blue !important; }
¡El título será azul! Esta propiedad viola el flujo natural de las reglas que escribimos y otorga a los estilos de menor prioridad la máxima prioridad.
Bueno, sin embargo, cómo "escupir" ... No realmente, y escupir. Agreguemos otro importador.
.content .title { color: red !important; } .title { color: blue !important; }
Y el titular vuelve a ser rojo. ¡Porque tenemos dos! Conflictos importantes, y este conflicto se resuelve comparando los pesos de los selectores.
Un importador es malo cuando es:
.title { color: red; }
“Hmm, escribí rojo, ¿por qué mi titular no es rojo? ¿Y si es así? .title { color: red !important; }
“Genial! ¡Rojo! ”¿ Pero es realmente bueno?
Este enfoque es malo, al menos porque redefine los estilos sin comprender por qué no se aplicaron sin un importador. Lo más probable es que el peso del selector que usó sea simplemente insuficiente y, al escribir un selector un poco más preciso y "pesado", resolvería su problema y redefiniría rígidamente los estilos, y es bueno si conoce y verifica todos los lugares donde se utilizó esta clase, pero si no es así, subordinó el elemento en un lugar y probablemente se rompió en otro.
Herramienta para hotfix
Muy a menudo, cuando le hago una pregunta a alguien sobre importadores, escucho una respuesta al estilo de:
"Utilizo importante cuando necesito solucionar rápidamente el problema y no tengo tiempo para entender el código que no escribí y que está mal escrito" .
Sí, pero solo las tareas son siempre "urgentes", tales tareas, por regla general, nadie terminará nunca, así que déjelo. Usted mismo no se ha dado cuenta de cómo empeoró el "código alienígena malo".
¿Qué significa ayunar? ¿Es tan difícil y largo descubrir el peso necesario del selector para la redefinición? Estamos usando DevTools de manera muy activa en el desarrollo, y tenemos la respuesta allí para resolver este problema.
Inspeccionamos el elemento que queremos cambiar. Su color actual es el negro. ¿Observamos a qué selector se le asignó este color?
Usamos el mismo selector para asignar un nuevo color o para aumentar el peso, y el punto está en el sombrero, no importa cuán difícil sea este selector.
Es largo? ¡Me parece que esto difiere poco en el tiempo de la escritura! Importante, pero es mucho más correcto y seguro.
Soluciones de terceros y el código de otra persona.
La segunda respuesta más popular a la pregunta sobre la necesidad de usar importadores:
"¡Utilizo! Importante al redefinir los estilos de bibliotecas y complementos de terceros o CMS-ok" .
Esta respuesta está un poco más cerca de la verdad, pero solo si está formulada con un poco más de precisión. Es de esta forma que es incorrecto, porque los estilos de los archivos de terceros se pueden sobrescribir de la misma manera que los suyos, simplemente agregándolos después de conectar los estilos de otras personas y aumentar el peso del selector.
Sin embargo, en algunos casos esta respuesta "entra" en la pregunta. Por ejemplo, si conectó un control deslizante a su página, que se implementa para que cuando cambie la diapositiva, el JavaScript sobrescriba los valores de algunas propiedades en CSS.
Y por alguna razón, debe anular estas propiedades, ignorando los cambios en el complemento en sí.
JS solo puede reasignar valores de propiedad utilizando estilos en línea. Es decir, de hecho, cualquier propiedad modificada para un elemento usando JavaScript simplemente se escribirá en el atributo de estilo. Desde el punto de vista del mecanismo de especificidad, estos estilos son más prioritarios, y no importa cómo aumente el peso del selector, no podrá sobrescribirlos.
Este es precisamente el
primer caso en el que simplemente no podemos prescindir de lo importante.
Si necesitamos redefinir los estilos en línea, solo lo importante nos ayudará.
La prioridad de los estilos con un importador es mayor que la prioridad de los estilos en línea, y si por alguna razón necesita reescribir estilos en línea, ¡no tiene más remedio que usar! Importante.
Importante para el bien
Consideremos un caso más, que a veces se usa en el código de varias bibliotecas y complementos.
Si abre el código fuente CSS de la biblioteca Bootstrap, verá que allí los desarrolladores de la biblioteca a menudo recurren al uso de importadores. Quizás también solo necesitaban solucionarlo rápidamente, y lo hicieron (sarcasmo), pero en general hay una explicación más adecuada. En este caso, los s importantes se usan "para bien". De esta manera, los desarrolladores de Bootstrap "protegen" su código.
El hecho es que al conectar esta biblioteca a su sitio, puede redefinir sus estilos originales. Por lo tanto, los desarrolladores están reasegurados y romper el comportamiento de su código será más difícil si no sabe cómo funciona la especificidad. Pero si comprende cómo funciona el mecanismo de especificidad en CSS, puede redefinir su importador escribiendo sus estilos con el importador también, pero con un selector más "pesado".
Por lo tanto, llegamos al
segundo caso cuando es imposible sin un importador.
Si necesita anular importante (la suya o de una biblioteca de terceros), ¡solo! Importante lo ayudará.
Es por eso que es incorrecto decir: "Uso importadores cuando necesito redefinir los estilos de bibliotecas de terceros", sería más correcto decir: "¡Uso importadores cuando necesito redefinir estilos en línea u otros! Importante". Y no importa de dónde provengan estos estilos: de sus archivos o de terceros.
Ayudantes
En el párrafo anterior, de hecho, todos los casos se describen cuando el uso de importadores será normal y correcto. Estos son casos en los que el uso de importadores será inevitable. Pero todavía hay casos en los que el uso de importadores será permisible, aunque tal vez ya no sea del todo apropiado.
A veces necesitamos clases universales auxiliares que usamos en nuestro código con el objetivo de reutilizar el código y alguna simplificación.
Por ejemplo, creamos algún tipo de clase .warning, que aplicaremos a varios elementos de la página, lo que indica su importancia.
.warning { color: red; }
Y queremos que al aplicar esta clase a cualquier elemento, definitivamente hagamos que el texto en este elemento sea rojo. Pero un elemento puede tener estilos de mayor prioridad grabados utilizando un selector más preciso, y luego nuestro color de la clase .warning será molido. En este caso, al agregar importante a nuestra clase auxiliar, la hacemos más universal, porque el color utilizado en esta clase será más prioritario. Sin embargo, no puedo decir que sea bueno. Después de todo, esto hace que los estilos de clase sean más prioritarios, pero aún así no garantiza que trabajes al cien por cien, ya que este ayudante puede encontrar otras cosas importantes y, de todos modos, todo saldrá mal. Y luego, cuando resulta que, sin embargo, en cierto caso, esta clase debe hacer que el texto "no sea tan rojo", inmediatamente "dará a luz" a un nuevo selector con la repetición del importador.
Cuando todavía es posible
¡Es correcto y normal de usar! Importante cuando necesita anular estilos en línea u otros! Importante.
Si sigue esta regla, resulta que en el diseño habitual, especialmente si está imponiendo una página desde cero, no necesita usar un importador hasta el momento en que comienza a conectar soluciones de terceros a su página, pero incluso así es como nosotros resuelto anteriormente, no necesariamente conduce a su uso.
Las metodologías modernas como BEM también dictan sus propias reglas, en las cuales el uso de estilos en línea o importadores será inapropiado.
No necesita un importador, no porque sea de alguna manera misterioso y terrible, sino simplemente porque en la mayoría de los casos puede prescindir de él.
Todas las excepciones que he determinado por mí mismo, por regla general, se reducen a casos no muy típicos. Por ejemplo, es posible que necesite usar esto cuando esté desarrollando su propia biblioteca, complemento o extensión de navegador y necesite un comportamiento de mayor prioridad para estilos específicos. Sin embargo, esto está lejos del uso habitual habitual.