Cascade, Units & CSS Best Practices

CSS Units

CSS has absolute units (px) and relative units (%, em, rem, vw, vh). Relative units help responsive and accessible design.

Real-life example: px is a fixed ruler. rem is a ruler that grows if the user changes base text size — better for eyesight needs.

html { font-size: 100%; } /* usually 16px */

.text {
  font-size: 1.125rem;  /* 18px if root is 16px */
  padding: 1rem;
  margin-bottom: 2rem;
}

.hero {
  min-height: 80vh;
  width: 100%;
}

.sidebar {
  width: 25%;
}

Inheritance

Some CSS properties pass from parent to child — like color and font-family. Others do not — like margin and border. You can use inherit to force a child to copy a parent value.

Real-life example: Inheritance is like children copying the family language at home — but not copying each person's pocket money.

body {
  color: #334155;
  font-family: system-ui, sans-serif;
}

.card {
  /* children inherit color and font unless overridden */
  border: 1px solid #e2e8f0;
}

.link-inherit {
  color: inherit;
  text-decoration: underline;
}

Specificity & !important

When two rules conflict, the browser picks a winner using specificity (id > class > tag) and source order. !important forces a rule to win but makes code hard to maintain — use rarely.

Real-life example: Specificity is like priority numbers on tickets — a VIP ticket beats a normal ticket. !important is like shouting over everyone — use only in emergencies.

p { color: gray; }           /* tag — low */
.text { color: blue; }         /* class — medium */
#main { color: green; }         /* id — high */

/* Wins: green (if same element has id="main") */

.alert {
  color: red !important; /* avoid unless fixing third-party CSS */
}

Math Functions (calc, min, max, clamp)

CSS can do math. calc() adds and subtracts sizes. min(), max(), and clamp() create flexible values that respond to screen size.

Real-life example: clamp() is like a tailor — never smaller than S, never bigger than L, but flexible in between.

.sidebar-layout {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: calc(1rem + 2vw);
}

.fluid-heading {
  font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}

.box {
  width: min(100%, 900px);
  margin-inline: auto;
}

CSS Counters

Counters automatically number headings, steps, or list items using counter-reset and counter-increment — no manual numbering in HTML.

Real-life example: Counters are like an automatic ticket machine that prints 1, 2, 3 without you writing numbers by hand.

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
}

.steps li {
  counter-increment: step;
  margin-bottom: 1rem;
  padding-left: 2.5rem;
  position: relative;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  background: #0891b2;
  color: white;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
}

Optimization, Accessibility & Layout Overview

Write small, reusable classes. Avoid deep nesting. Use semantic HTML first. Ensure color contrast, focus states, and readable font sizes. Most sites use header, main, sections, and footer — styled with Flexbox or Grid.

Real-life example: Optimization is like packing a school bag — only what you need, neatly arranged, so you are not slow walking to class.

• Combine CSS files in production to reduce requests.
• Remove unused CSS in large projects (build tools help).
• Minimum body text: about 16px (1rem).
• Contrast ratio: dark text on light background (or reverse) with good difference.
• Layout overview: mobile-first base styles, then wider breakpoints.