La manera en como el navegador aplica estilos CSS esta relacionado con 3 conceptos : Importancia , especificidad(mas especifico) y orden de las declaraciones, al final del proceso se asignan pesos a cada declaración CSS y este peso determina que estilos son aplicados sobre los demás.
Vamos a recordar un poco como es que el navegador decide aplicar estilos a las paginas web, por ejemplo normalmente esta es la jerarquía en la cual el navegador decide cuales estilos aplicar cuando encuentra muchas declaraciones CSS :
- Busca todas las declaraciones CSS para aplicar al elemento.
- Aplica el estilo al elemento basado en los conceptos de "importancia" y "orden de las declaraciones" en el siguiente orden, siendo el ultimo con mas peso para ser aplicado:
- Declaracion CSS del user agent (estilos por defecto del navegador).
- Declaracion CSS del usuario.(opciones en el navegador configuradas por el usuario)
- Declaracion del autor.(scripts CSS o estilos insertador en el html)
- Declaracion del autor con !important.
- Declaracion del usuario con !important.
- Aplica el estilo basándose en la declaración mas especifica, siendo el selector mas especifico el ganador
- Si existen 2 selectores idénticos, gana el ultimo en el orden de declaración.
- Aplica el estilo basado en el orden en el aparecen en el documento, el ultimo siempre gana.
Podrás haber notado como el uso de !important modifica el comportamiento del navegador para aplicar estilos. El uso de !important es la manera que tenemos para dar mas valor a un selector del que naturalmente tiene, A continuacion un ejemplo de como important afecta el flujo natural.
Puedes ver como el color rojo prevalece a pesar del orden de las ultimas declaraciones CSS y aun siendo mas especificas. A pesar del sus potenciales usos para forzar la reescritura de estilos CSS, el uso de !important es considerado por algunos como una mala practica.
Solo debería de usarse cuando sea verdaderamente necesario, si no muchas partes de tu código CSS serán muy difícil de mantener. Tal vez para reparar algunas secciones temporales ó sobrescribir estilo de alguna librería externa.
link: http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
link: http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
Comparte tus bookmarks: http://unitedbookmark.com/
Puedes ver como el color rojo prevalece a pesar del orden de las ultimas declaraciones CSS y aun siendo mas especificas. A pesar del sus potenciales usos para forzar la reescritura de estilos CSS, el uso de !important es considerado por algunos como una mala practica.
Solo debería de usarse cuando sea verdaderamente necesario, si no muchas partes de tu código CSS serán muy difícil de mantener. Tal vez para reparar algunas secciones temporales ó sobrescribir estilo de alguna librería externa.
link: http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
link: http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
Comparte tus bookmarks: http://unitedbookmark.com/
No hay comentarios:
Publicar un comentario