CSS

Escribes .sidebar .card { color: blue; }, cargas la página y la tarjeta sigue en rojo por una regla que añadiste una hora antes: .card { color: red; }. Tu nueva regla va después en el archivo. Sigue perdiendo. El navegador compara los dos selectores con un sistema de puntos fijo, y .sidebar .card puntúa más alto que .card sin importar cuál escribiste al final. Ese sistema de puntos es la especificidad. En cuanto sabes calcularla a simple vista, “por qué no se aplica mi CSS” se vuelve aritmética. No tiene nada que ver con el layout: Grid o Flexbox decide dónde se coloca un elemento, y la especificidad decide qué regla fija su color o tamaño cuando dos reglas entran en conflicto. ...

Estás montando un dashboard: un header, un sidebar, un área de contenido principal y un footer. Recurres a Flexbox porque es la herramienta de layout que conoces, y veinte minutos después tienes tres contenedores display: flex anidados, un sidebar que no mantiene su ancho sin un número mágico, y un footer que flota a mitad de página cuando el contenido es corto. Nada de eso es un bug de Flexbox. Estás usando una herramienta unidimensional para un problema bidimensional. ...