THE GARDEN

CSS cascade, layout, and debugging

Updated 06 Oct 2026

• •

  Cascade and specificity

  • •

    Competing declarations -> resolved through origin, cascade ayers, improtance, specificity, and soruce order

  • •

    specificity compares selector weights after higher-level cascade precedence

  • •

    Adding an ID -> is not a universal fix; excessive important declarations make later changes harder

• •

  Inheritance

  • •

    selected properties pass form a parent to descendants when the child has no stronger declaration

  • •

    Inheritance -> part of value selection, but is distinct from the cascade

  • •

    inspect computes styles and the winning rule when a declaration hasno visible effect

  • •

    {{renderer :bermaid}}

    • •

      graph TD
        A[Competing declarations for one property] --> B[1. Origin, layer, importance]
        B -->|One wins| W[Winning declaration]
        B -->|Tie| C[2. Specificity]
        C -->|One wins| W
        C -->|Tie| D[3. Source order - last wins]
        D --> W
        W --> X[Example: id rule color red wins at 1-0-0]
      

• •

  Layout

  • •

    Block and inline flow, Flexbox, and Grid support different arrangements.

  • •

    Flexbox -> useful along one main axis; Grid provides explicit rows and columns.

  • •

    A Block Formatting Context establishes layout rules for floats and margins; it is not a generic name for every container.

• •

  Responsive behavior

  • •

    adapt layouts to viewport and content constraints with fluid sizing, flexible layouts, and breakpoints where useful

  • •

    overflow controls content beyond a box; clipping can hide content, while scrolling can make it accessble

  • •

    a stacking context constrains descendant layering, so a large z-index cannot always escape its parent

• •

  Debugging

  • •

    reduce the case; inspect the DOM, cimputed styles, winning declaration, box dimensions, overflow, stacking contexts, and viewport constraints

  • •

    a screenshot alone may hide the rule or containing block that cuased the result

◌ Explore connections in Graph view