Una de las mejores formas de aprender a codificar sitios web es mirar el códigos fuente de otros sitios. Esta práctica es la forma en que muchos profesionales de la web aprendieron su oficio, especialmente en los días anteriores a la existencia de tantas opciones para diseño web cursos, libros y sitios de formación en línea.
Si prueba esta práctica y observa las hojas de estilo en cascada de un sitio, una cosa que puede ver en ese código es una línea que dice !importante. Este término cambia la prioridad de procesamiento dentro de la hoja de estilo.
La cascada de CSS
Las hojas de estilo en cascada sí lo hacen cascada, lo que significa que se colocan en un orden particular. En general, 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 instancias posteriores, no la primera. Básicamente, si dos estilos dicen lo mismo (lo que significa que tienen el mismo nivel de especificidad), se utilizará el último de la lista.
Por ejemplo, imaginemos que los siguientes estilos estuvieran contenidos en una hoja de estilos. 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; }
¿Qué tan importante cambia la prioridad?
La !importante La directiva afecta la forma en que su CSS entra en cascada mientras sigue las reglas que cree que son más cruciales y deben aplicarse. Una regla que tiene esta directiva siempre se aplica sin importar dónde aparezca esa regla en el documento CSS.
Para que el texto del párrafo sea siempre rojo, del ejemplo anterior, cambie el estilo de la siguiente manera:
p {color: rojo! importante; }
p {color: negro; }
Ahora todo el texto aparecerá en rojo, aunque el valor "negro" aparece en segundo lugar. La directiva! Important anula las reglas normales de la cascada y le da a ese estilo una especificidad muy alta.
Si necesitara absolutamente que los párrafos aparezcan en rojo, este estilo lo haría, pero eso no significa que sea una buena práctica.
¡Cuándo usarlo! Importante
La directiva! Important es útil cuando está probando y depurando un sitio web. Si no está seguro de por qué no se está aplicando un estilo y cree que puede ser un conflicto de especificidad, agregue la declaración! Important a su style para ver si eso lo soluciona, y si lo hace, cambie el orden de los selectores y elimine las directivas importantes de su producción. código.
Si se apoya demasiado en la declaración! Important para lograr los estilos que desea, eventualmente tendrá una hoja de estilo llena de! Estilos importantes. Cambiará fundamentalmente la forma en que se procesa el CSS de esa página. Es una práctica perezosa que no es buena desde el punto de vista de la gestión a largo plazo.
Utilice! Important para realizar pruebas o, en algunos casos, cuando sea absolutamente necesario anular un estilo en línea que sea parte de un marco de trabajo de tema o plantilla. Incluso en esos casos, use este enfoque con moderación y en su lugar escriba hojas de estilo limpias que respeten las cascada.
Hojas de estilo de usuario
Esta directiva también se implementó para ayudar a los usuarios de páginas web a lidiar con hojas de estilo que dificultan su uso o lectura.
Cuándo alguien define una hoja de estilo para ver páginas web, esa hoja de estilo es anulada por la hoja de estilo del autor de la página. 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.
Esta jerarquía es útil para los usuarios que necesitan establecer estilos de cierta manera. Por ejemplo, un lector con discapacidad visual puede necesitar aumentar los tamaños de fuente predeterminados en todas las páginas web que utiliza. Al usar su directiva! Important con moderación dentro de las páginas que crea, se adapta a las necesidades únicas de sus lectores.