Tips & Tricks

Margins on flex children fight each other and leave a stray edge you have to clear with :last-child hacks. The gap property spaces items evenly and only between them — nothing to clean up. Works in flexbox and grid alike.

.row { display: flex; gap: 1rem; }

One attribute tells the browser to defer offscreen images until the user scrolls near them. No library, no observer — it ships in every modern browser. Skip it on your hero image, though; that one you want loaded immediately.

<img src="card.jpg" loading="lazy" alt="…">

Never blanket-remove outlines with outline: none. Keyboard users rely on that ring to know where they are. If the default outline clashes with your design, restyle it with :focus-visible so it only shows for keyboard navigation, not mouse clicks.

:focus-visible {
  outline: 2px solid #d4ad6a;
  outline-offset: 2px;
}

Custom fonts block text from painting and cost a download on every visit. For body and interface text, the system font stack renders instantly and looks native on every device. Save the custom typefaces for headings where the brand actually shows.

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

"Click here" tells search engines and screen readers nothing about the destination. Make the link text describe where it goes — it improves accessibility and gives the target page relevant anchor context for ranking.

<!-- not this -->
<a href="/pricing">Click here</a>

<!-- this -->
<a href="/pricing">See our pricing plans</a>

The old min-width / max-width pairs are clumsy and the max values need a fiddly -0.02px to avoid overlap. Modern browsers support plain comparison operators, so a range reads exactly like the math in your head — and it's one line.

/* old way */
@media (min-width: 600px) and (max-width: 899.98px) { … }

/* now */
@media (600px <= width < 900px) { … }

Write the small-screen layout as your base with no media query at all, then use min-width queries to add complexity as the screen grows. You end up writing less CSS, you never fight max-width overrides, and the lightest layout is the default for the most constrained devices.

/* base: mobile, no query needed */
.grid { display: grid; gap: 1rem; }

/* enhance upward */
@media (width >= 700px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

Big scroll animations can trigger nausea and dizziness for some people, and the OS lets them opt out. Wrap your motion in this media query so it scales back for anyone who's asked the system to reduce motion.

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}