CSS

Você escreve .sidebar .card { color: blue; }, carrega a página e o card continua vermelho por causa de uma regra adicionada uma hora antes: .card { color: red; }. A nova regra vem depois no arquivo. Mesmo assim, perde. O navegador compara os dois seletores com um sistema de pontos fixo, e .sidebar .card pontua mais alto que .card, não importa qual você escreveu por último. Esse sistema de pontos é a especificidade. Depois que você aprende a calculá-la de cabeça, “por que meu CSS não se aplica” se torna aritmética pura. Não tem nada a ver com layout: Grid ou Flexbox decide onde um elemento fica, a especificidade decide qual regra define a cor ou o tamanho quando duas regras entram em conflito. ...

Você está montando um dashboard: cabeçalho, barra lateral, área de conteúdo principal, rodapé. Você recorre ao Flexbox porque é a ferramenta de layout que conhece, e vinte minutos depois tem três containers display: flex aninhados, uma barra lateral que não mantém a largura sem um número mágico, e um rodapé que flutua na metade da página quando o conteúdo é curto. Nada disso é um bug do Flexbox. Você está usando uma ferramenta unidimensional para um problema bidimensional. ...