CSS: Styling the Web Since 1996

  • Created: Håkon Wium Lie proposed CSS in 1994, released December 1996
  • The problem: Before CSS, styling was inline <font color='red'>—nightmare to maintain
  • Today: CSS3 has 500+ properties, but most sites use fewer than 50

CSS vs SCSS vs LESS

  • CSS: Standard browser styling—what actually runs in the browser
  • SCSS (Sass): Variables ($color), nesting, mixins, @import. Compiles to CSS
  • LESS: Similar to SCSS but uses @color syntax. Bootstrap 3 used it
  • Winner?: SCSS dominates (Bootstrap 4+, Tailwind source, most frameworks)

Why Preprocessors Exist

  • Variables: $primary-color: #007bff; → Change once, updates everywhere
  • Nesting: .nav { .item { color: red; } } → Cleaner than .nav .item {}
  • Mixins: Reusable chunks like @include button-styles;
  • Math: width: 100% / 3; → Calculate values at compile time
  • Partials: Split into _header.scss, _footer.scss, @import them together

Modern CSS Features (No Preprocessor Needed!)

  • CSS Variables: --primary: #007bff; color: var(--primary);
  • Nesting (2023): .card { & .title { } } — Native CSS nesting is here!
  • calc(): width: calc(100% - 20px); — Math in plain CSS
  • @layer: Control specificity cascade order (CSS Cascade Layers)
  • :has(): Parent selector! .card:has(img) { } — long-awaited feature

Minification Benefits

  • Removes whitespace, comments, and unnecessary semicolons
  • Typical savings: 20-40% file size reduction
  • Combined with GZIP: 80%+ total reduction
  • Shortens colors: #ffffff → #fff, rgb(0,0,0) → #000
  • Warning: Minified CSS is unreadable—keep source files formatted!

CSS Specificity Cheat Sheet

  • 0,0,0,1: Element (p, div, span)
  • 0,0,1,0: Class (.btn), attribute [type='text'], pseudo-class (:hover)
  • 0,1,0,0: ID (#header)
  • 1,0,0,0: Inline style (style='...')
  • ∞: !important — nuclear option, avoid if possible

Common CSS Mistakes

  • Using IDs for styling: Too specific, hard to override. Use classes instead
  • !important everywhere: Sign of specificity problems—fix the cascade
  • z-index: 9999: Arbitrary high values cause wars. Use a scale (1, 10, 100)
  • Not using shorthand: margin: 10px 20px; beats four separate properties
  • Forgetting vendor prefixes: -webkit-backdrop-filter for Safari (use autoprefixer)

CSS Architecture Patterns

  • BEM: .block__element--modifier — Most popular naming convention
  • OOCSS: Separate structure and skin (reusable objects)
  • SMACSS: Categories: Base, Layout, Module, State, Theme
  • Atomic/Utility: Tailwind approach: .flex .items-center .p-4
  • CSS Modules: Scoped class names, no global conflicts

Pro Tips

  • Order properties consistently: position, display, box-model, typography, visual
  • Use logical properties: margin-inline-start instead of margin-left for RTL support
  • Group media queries with the component, not at file bottom
  • rem for fonts (accessibility), px for borders, % or vw for layouts
  • Test in Firefox: Its DevTools CSS inspector is often better than Chrome's