Una de las mejores maneras de aprender a codificar sitios web es mirar los códigos fuente de otros sitios. Esta práctica es cómo muchos profesionales de la web aprendieron su oficio, especialmente en los días previos a la existencia de tantas opciones para cursos de diseño web, libros y sitios de capacitación en línea.
Si prueba esta práctica y observa las hojas de estilo en cascada (CSS) de un sitio, una cosa que puede ver en ese código es una línea que dice importante. ¿Qué significa eso y, lo que es más importante, cómo utiliza correctamente esa declaración en sus hojas de estilo?
La Cascada de CSS
En primer lugar, es importante entender que las hojas de estilo en cascada sí lo hacen cascada , lo que significa que se colocan en un orden particular. En general, esto significa que los estilos se aplican en el orden en que los lee el navegador. Se aplica el primer estilo y luego el segundo y así sucesivamente.
Como resultado, si un estilo aparece en la parte superior de una hoja de estilo y luego se cambia más abajo en el documento, la segunda instancia de ese estilo es la que se aplica en las instancias posteriores, no la primera. Básicamente, si dos estilos dicen lo mismo (lo que significa que tienen el mismo nivel de especificidad), se usará el último listado.
Por ejemplo, imaginemos que los siguientes estilos estaban contenidos en una hoja de estilo. El texto del párrafo se representaría en negro, aunque la primera propiedad de estilo aplicada sea roja. Esto se debe a que el valor "negro" aparece en segundo lugar. Dado que CSS se lee de arriba a abajo, el estilo final es "negro" y, por lo tanto, ese gana.
p {color: rojo; }p {color: negro; }
¡Cómo! Importante cambia la prioridad
Ahora que entiende cómo estas reglas casi idénticas son procesadas por CSS, podemos ver cómo la directiva importante cambia las cosas un poco.
La directiva! Importante afecta la forma en que su CSS cae en cascada mientras sigue las reglas que considera más importantes y deben aplicarse. Una regla que tiene la directiva! Important siempre se aplica sin importar dónde aparezca esa regla en el documento CSS.
Para que el texto del párrafo sea siempre rojo, a partir del ejemplo anterior, utilizará:
p {color: rojo! importante; }p {color: negro; }
Ahora todo el texto aparecerá en rojo, aunque el valor "negro" aparezca en segundo lugar. La directiva! Importante anula las reglas normales de la cascada y le da a ese estilo una especificidad muy alta.
Si es absolutamente necesario que los párrafos aparezcan en rojo, este estilo lo haría, pero eso no significa que esta sea una buena práctica. Veamos a continuación cuándo es posible que desee usar! Importante y cuándo no es apropiado.
Cuando usar! Importante
La directiva! Important es muy útil cuando está probando y depurando un sitio web. Si no está seguro de por qué no se aplica un estilo y cree que puede tratarse de un problema de especificidad, puede agregar la declaración importante a su estilo para ver si eso lo corrige.
Si agregar! Important realmente soluciona el problema de estilo, acaba de determinar que se trata de un problema de especificidad. Sin embargo, no desea dejar ese código importante en su lugar, solo se colocó allí para fines de prueba.
Ya que las pruebas están hechas, ahora debe eliminar esa directiva y ajustar su selector para lograr la especificidad que necesita para que su estilo funcione. ! important no debe abrirse camino en sus sitios de producción, en parte debido a cómo cambia la cascada normal.
Si se apoya demasiado en la declaración importante para lograr los estilos deseados, finalmente tendrá una hoja de estilos llena de estilos importantes. Estará cambiando fundamentalmente la forma en que se procesa el CSS de la página. Es una práctica perezosa que no es buena desde el punto de vista de la gestión a largo plazo.
Utilice! Importante para las pruebas o, en algunos casos, cuando debe reemplazar un estilo en línea que forma parte de un marco de tema o plantilla. Incluso en esos casos, utilice este enfoque lo más moderadamente posible y, en su lugar, intente escribir hojas de estilo limpias que comprendan la cascada.
Hojas de estilo del usuario
Hay una nota final sobre la directiva importante que es esencial entender. Esta directiva también se implementó para ayudar a los usuarios de páginas web a hacer frente a las hojas de estilo que dificultan el uso o la lectura de las páginas.
Normalmente, si un usuario define una hoja de estilo para ver páginas web, la hoja de estilo del autor de la página web anulará esa hoja de estilo. Si el usuario marca un estilo como! Importante, ese estilo anula la hoja de estilo del autor de la página web, incluso si el autor marca una regla como importante.
Esto es útil para los usuarios que necesitan establecer estilos de una determinada manera. Por ejemplo, alguien puede necesitar aumentar los tamaños de fuente predeterminados en todas las páginas web que usan. Al usar su directiva importante con moderación dentro de las páginas que construye, puede satisfacer cualquier necesidad especial que sus usuarios puedan tener.
