Cascade

the cascade

Describes how CSS decides the final rule to apply when multiple rules target the same element and property.

It answers: “Which rule wins overall?”
It takes importance, origin, specificity, and order of appearance into account — in that order.

One value per property per element to determine the visual styles is what the cascade does.

Cascade Logic Order

FactorPriority LevelExample
!importantHighestcolor: red !important;
OriginHighAuthor > User > Browser defaults
LayersBetween@layer base, layout, utils
SpecificityMedium#id > .class > element
OrderLowestLast rule in file wins

style computation

https://moderncss.dev/how-custom-property-values-are-computed/

When the browser parses CSS, its goal is to calculate one value per property per element in the DOM.

Something you learn early on about CSS is that you can change a property’s value multiple times from multiple rules that may select the same element.

  • Inherited values come from the nearest ancestor that has assigned a value, if the property is allowed to inherit (ex. color, font properties, text-align)
  • Initial values are used when no inherited value exists or is allowed and are the values provided by the specification for the property

https://www.matuzo.at/blog/2023/100daysof-day82/

specificity

Tells how strong a selector is — based on how precisely it targets elements. It answers: “Which selector is more specific?”

https://specificity.keegan.st/

“Inline ID Class Element” IICE mnenomic

Selector TypeSpecificityNotes
Inline stylesa = 1e.g. style="..."
ID selectorb += 1e.g. #header
Class, attribute, pseudo-classc += 1e.g. .box, [type="text"], :hover
Element, pseudo-elementd += 1e.g. div, h1, ::after
!important🔥 Not counted in specificity — but overrides all
SelectorSpecificity (a,b,c,d)Total Score
div(0,0,0,1)1
.menu(0,0,1,0)10
#main(0,1,0,0)100
section#main .menu h2(0,1,1,1)111
style="color: red"(1,0,0,0)1000

container queries

container queries are component level media queries are page/screen level

set a range

@media (600px < width < 800px)

alternate to min-width:

@media (600px < width)

grid

layers

@layer reset, base, properties, layout, components, utilities

layouts

typography

animations

every-layout

rem for block element, em for inline elements. em will based on the parent rem for fluid sizing.

  • fluid typography
calc(1rem + .5vh)
  • logical properties instead of physical properties
  • intrinsic (browser algorithms) versus extrinsic (author defined style rules)
  • single quantum layout existing in different states versus multiple layouts per each state (mobile, tablet, desktop)
  • prefer container based breakpoints over viewport breakpoints

css components

https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/

  • resets
  • nesting

Use :is() to flatten nested selector logic and reduce repetition:

.main-nav a.active,
.main-nav button.active,
.footer-nav a.active,
.footer-nav button.active,
.sidebar-nav a.active,
.sidebar-nav button.active {
  color: white;
  background-color: navy;
}
:is(.main-nav, .footer-nav, .sidebar-nav) :is(a, button).active {
  color: white;
  background-color: navy;
}
  • layers
  • theming
  • layout
    • grid with: repeat( auto-fit, minmax(min(100%, var(--layout-grid-min)), 1fr))
    • flexbox with: `{ flex: 1 1 var(—flex-grid-min);}
  • container queries
  • style queries
  • notes
    • @media (width > 720px)
    • hsl for colors
    • primitives —green-400
    • semantic —section-columns: var(—green-400)