CSS

Overview

CSS controls layout, spacing, typography, responsiveness, and much of the user experience.

Why It Matters

Many frontend bugs are styling bugs that affect usability, not just appearance.

Core Concepts

Layout is a system.
Specificity and cascade matter.
Responsive design should adapt, not fork.

Mental Models

Use the browser’s layout engine instead of fighting it. Let content and constraints drive the design.

Best Practices

Prefer simple layout primitives.
Keep tokens and spacing consistent.
Test at real viewport sizes.

Common Mistakes

Overusing absolute positioning.
Writing CSS that only works on one screen size.
Allowing style drift across components.

Trade-offs

Utility classes speed up local work, but they still need design discipline to avoid inconsistency.

Decision Framework

flowchart TD
  A[Need layout] --> B{Can native flow solve it?}
  B -->|Yes| C[Use normal flow]
  B -->|No| D{Need grid or flex?}
  D -->|Grid| E[Use grid]
  D -->|Flex| F[Use flex]

Examples

.card {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

Checklists

Is the layout responsive?
Are spacing values consistent?
Does the UI still work without hover?

Senior Engineer Notes

Senior engineers use CSS to make systems easier to reason about, not just prettier. A stable layout system saves more time than a pile of fixes.

CSS

CSS