¿Cómo se controla el orden de la declaración en CSS?
Puede ser frustrante que intentes realizar cambios en los estilos CSS y no se vean reflejados en el resultado. También, te puede pasar que realizas algún cambio pero rompes el estilo de otro elemento HTML. Esto ocurre mucho cuando uno está empezando a manipular estilos CSS.
En este artículo te explicaré cómo puedes evitar estas dos situaciones de frustración. La clave es manejar la importancia, la especificidad y mantener un orden en las fuentes.
El navegador aplica estilos CSS teniendo en cuenta estos tres puntos:
Importancia
Este es uno de los conceptos más importantes. Si dos declaraciones CSS tienen una misma importancia, la especificidad de las reglas define cuál de las dos declaraciones se debe aplicar.
El navegador, carga los estilos de forma distinta:
1 – Hoja de estilo de agente de usuario. Estos son los estilos que trae el navegador por defecto.
2 – declaraciones normales en hojas de estilos del autor. Nuestros estilos CSS (style.css).
3 – Declaraciones importantes en hojas de estilos del autor. Esto es cuando se utiliza la palabra ¡important después de la declaración de una propiedad. Sin embargo, esta es una muy mala práctica porque se pueden romper estilos o simplemente, te puedes perder acerca de la estructura de tus propios estilos CSS.
Especificidad
Si dos declaraciones tienen la misma especificidad, el orden de las fuentes define cuál de las dos declaraciones CSS se debe aplicar.
Entonces, según este cuadro anterior, tienen más prioridad según el siguiente orden: tag, .class, #id, inline styles, !important.
En este enlace, accedes a una calculadora que te permitirá precisar el cálculo de la importancia de especificidad de los estilos CSS que estás aplicando y tu CSS no se comporte de forma diferente a la esperada.
Este es el algoritmo de cómo se comporta CSS en el navegador en cuestión de especificidad
Orden en las fuentes
Esta es la forma en la cual mandamos a llamar los estilos en un documento CSS.
En nuestros estilos, las declaraciones al final del documento CSS anulan a las declaraciones que suceden antes en caso de existir un conflicto.
Entonces hay que tener cuidado en la manera que se escribe el CSS. Pues si tienes dos clases iguales en la parte de arriba y en la parte final del documento, la que está al final del documento reescribirá los estilos definidos en la parte de arriba.