CSS

You write .sidebar .card { color: blue; }, load the page, and the card is still red from a rule you added an hour earlier: .card { color: red; }. Your new rule comes later in the file. It still loses. The browser compares the two selectors with a fixed point system, and .sidebar .card scores higher than .card no matter which one you wrote last. That point system is specificity. Once you can calculate it on sight, “why isn’t my CSS applying” becomes arithmetic. It has nothing to do with layout: Grid or Flexbox decides where an element sits, and specificity decides which rule sets its color or size when two rules disagree. ...

You’re building a dashboard: a header, a sidebar, a main content area, a footer. You reach for Flexbox because that’s the layout tool you know, and twenty minutes later you’ve got three nested display: flex containers, a sidebar that won’t hold its width without a magic number, and a footer that floats halfway up the page when the content is short. None of that is a Flexbox bug. You’re using a one-dimensional tool on a two-dimensional problem. ...