CSS

Sie schreiben .sidebar .card { color: blue; }, laden die Seite, und die Card ist immer noch rot — wegen einer Regel, die Sie eine Stunde vorher hinzugefügt haben: .card { color: red; }. Ihre neue Regel steht später in der Datei. Sie verliert trotzdem. Der Browser vergleicht die beiden Selektoren mit einem festen Punktesystem, und .sidebar .card erhält eine höhere Punktzahl als .card, egal welcher zuletzt geschrieben wurde. Dieses Punktesystem ist die Spezifität. Sobald Sie sie auf den ersten Blick berechnen können, wird “warum wirkt mein CSS nicht” zu Arithmetik. Mit dem Layout hat das nichts zu tun: Grid oder Flexbox entscheidet, wo ein Element sitzt; die Spezifität entscheidet, welche Regel Farbe oder Größe setzt, wenn zwei Regeln sich widersprechen. ...

Sie bauen ein Dashboard: Header, Sidebar, Hauptbereich, Footer. Sie greifen zu Flexbox, weil das nun mal das Layout-Werkzeug ist, das Sie kennen – und zwanzig Minuten später stapeln sich drei verschachtelte display: flex-Container, die Sidebar hält ihre Breite nur mit einer willkürlichen Pixelzahl, und der Footer schwebt mitten auf der Seite, sobald der Inhalt kurz ist. Das ist kein Flexbox-Bug. Sie wenden ein eindimensionales Werkzeug auf ein zweidimensionales Problem an. ...