Layout, CSS and the cascade

two rules both apply to the element and the browser follows a fixed set of tie-breaks to pick one.

The cascade

your new rule does nothing until you nest it one level deeper, and now it wins.

Specificity

you moved the import to the bottom of the file and the styles started applying.

Source order

you could not work out why the rule was losing, so you added `!important` and moved on.

!important

you put the vendor stylesheet in a lower layer and your one-class rule now beats its id selectors.

Cascade layers

you set the font on the body and every element inside picked it up without being named.

Inheritance

you change one value on the root element and a theme's worth of colours updates without a rebuild.

Custom property

you set the width to 300 pixels and the element takes up 340, because of padding you forgot to count.

Box model

you put `box-sizing: border-box` in the reset and every width in the codebase started meaning what you expected.

box-sizing

the child's top margin pushed the parent down instead of moving the child inside it.

Margin collapsing

you added `overflow: hidden` to the parent and the floats inside it stopped escaping the bottom.

Block formatting context

you set `z-index: 9999` and the element still sits behind the header.

Stacking context

you keep raising the number in one file and lowering it in another until the overlay is on top.

z-index

your absolutely positioned element anchored to the whole page instead of the card you meant.

Containing block

you took the element out of the flow and everything after it moved up to fill the gap.

Absolute positioning

the heading scrolls with the page until it reaches the top, then stays there until its section ends.

Sticky positioning

the page scrolls, but your scroll listener on `window` never fires because the scrolling happens inside a div.

Scroll container

you laid the row out along one axis and let the items decide how to share the leftover space.

Flexbox

you defined the columns once on the container and the children fell into place without any width of their own.

CSS grid

the labels in every card line up with each other even though each card is a separate component.

Subgrid

the sidebar collapses below 768 pixels because you picked that number once and never revisited it.

Media query

the same card renders as a row in the wide column and as a stack in the narrow one, with no props involved.

Container query

you wrote `margin-inline-start` and the layout mirrored itself correctly in Arabic without a second stylesheet.

Logical properties

you hid the panel and everything below it moved up to fill the space it used to take.

display: none

you hid the element and the gap where it used to be stayed exactly the same size.

visibility: hidden

the class in the output is a hashed string, so nothing else on the page can accidentally match it.

Scoped styles

the styles are written next to the component and injected into a style tag when it first renders.

CSS-in-JS

the markup carries a dozen single-purpose classes and there is no stylesheet to open at all.

Utility-first CSS