CSS significa C ascading S tyle S heet. Comprender la cascada es fundamental para escribir código sostenible. Su pregunta es realmente una pregunta sobre la cascada:
Hay varias cascadas
Cuando el navegador carga CSS, ocurren tres cascadas:
- La primera cascada es donde el navegador mira su propia hoja de estilo predeterminada.
- El segundo es donde el navegador mira los estilos que usted, el desarrollador, ha escrito.
- El tercero es donde el navegador observa cualquier estilo que el usuario final pueda estar usando (los usuarios ciegos o con discapacidad visual pueden tener estilos especiales)
Lo importante a entender es que el orden importa . Tus estilos vienen en segundo lugar. No primero No ultimo.
- ¿Cuál es la diferencia de rendimiento entre 'let' y 'var' en JavaScript?
- Cómo informar a un diseñador web y desarrollador web
- ¿Qué debo aprender angular js o jQuery?
- Cómo hacer que Javascript sepa que se seleccionó un elemento desplegable
- ¿Qué tecnología usar para la web en 2017?
Mecánica de la cascada
Cascada es una palabra bastante fácil, ¿verdad? Cuando el agua cae en cascada por una cascada, va de arriba a abajo. Eso significa que el último conjunto de reglas que escribes es lo que importa, ¿verdad?
No exactamente
- Algunos navegadores se analizarán de abajo hacia arriba, pero eso no afectará los estilos.
- Todos los navegadores se analizarán de derecha a izquierda; el elemento que se encuentra más a la derecha en su selector CSS es el que está apuntando. Todo lo que tiene delante es solo una forma de identificarlo más fácilmente.
- todos los selectores tienen algo llamado especificidad
- La especificidad importa más que el orden
- El orden resuelve conflictos de especificidad
Ver: http://dabblet.com/gist/d432bbcf…
Mecánica del bloque de declaración
El bloque de declaración es todo dentro de las llaves. Consiste en propiedades y valores.
- Si tiene propiedades idénticas, la última propiedad gana
- Si usa una propiedad de taquigrafía y una mano larga (borde vs. borde superior), la última propiedad sigue ganando.
- Si el valor de una propiedad pudiera cambiar en función de otra propiedad , el orden no importará … mucho
- Si hay dos propiedades que podrían afectarse entre sí (como el tamaño de fuente y la altura de línea), el orden no afecta el valor calculado, aunque el usuario final puede percibir un destello de contenido sin estilo.
Ver: http://dabblet.com/gist/76655301…
tl; dr
- El orden entre conjuntos de reglas solo importa cuando la especificidad es igual.
- El orden entre propiedades es importante cuando tienes propiedades idénticas.
- El orden entre las propiedades no importa para el valor calculado de ninguna otra propiedad dada.
CSS: El desglose || El selector y la gramática (parte 1)
Asignación de valores de propiedad, cascada y herencia
Comprender los comportamientos de representación del navegador para optimizar CSS
