The gap between someone who writes CSS occasionally and someone who writes it daily is not talent — it is knowing which six or seven modern features remove entire categories of hack. These are the ones that come up constantly.
Instead of three breakpoints for a heading, one line: font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);. The middle value is the fluid target, the outer two are hard floors and ceilings. The same idea works for spacing (padding: clamp(1rem, 4vw, 3rem)) and for container widths. Keep a rem term in the middle expression rather than pure vw, otherwise the text stops responding to the user's browser zoom, which is an accessibility regression.
Media queries ask about the viewport, which is the wrong question for a card that appears in both a sidebar and a full-width grid. Mark the parent with container-type: inline-size and query it:
.card-wrap { container-type: inline-size; }
@container (min-width: 30rem) {
.card { display: grid; grid-template-columns: 8rem 1fr; }
}The component becomes genuinely portable. Container query units (cqi, cqw) let type scale to the container instead of the screen.
.card:has(img) styles a card differently when it contains an image. label:has(+ input:invalid) turns a label red without a class. body:has(dialog[open]) locks background scroll without JavaScript. The mental shift is that it is a general condition selector, not just an upward one — form:has(input:focus) is a state you previously tracked in JS.
The responsive card grid with no breakpoints: grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));. The inner min() is the detail most people miss — without it the layout overflows on narrow screens because 18rem exceeds the container. For a holy-grail layout, named areas beat nested flexbox every time, and subgrid lets a child align to the parent's tracks so card headers and footers line up across a row regardless of content length.
min-width: 0 on a flex child stops long unbreakable strings from blowing out the layout. This is the single most common flexbox bug.overflow-wrap: anywhere handles long URLs; text-wrap: balance on headings stops the one-word last line.aspect-ratio: 16 / 9 replaces the padding-top percentage hack entirely.scroll-margin-top: 5rem on anchor targets stops a sticky header covering the heading you jumped to.:focus-visible instead of :focus gives keyboard users a ring without showing it on every mouse click. Never remove the ring without replacing it.accent-color: var(--brand) restyles checkboxes, radios and range inputs in one line.Wrap non-essential motion in @media (prefers-reduced-motion: reduce) and reduce durations to near zero. Define your palette so @media (prefers-color-scheme: dark) only redefines custom properties rather than component rules. And use color-scheme: light dark on the root so native form controls and scrollbars follow suit — one declaration that most dark themes forget.
@layer reset, base, components, utilities; declared once at the top of your stylesheet fixes specificity wars permanently: a single-class utility in a later layer beats a three-selector component rule in an earlier one, no !important required. It is the closest CSS has to an architecture directive, and it costs one line.