29. CSS Best Practices

What you will learn

• Habits that keep stylesheets small, readable, and easy to change
• How to name classes and organise files
• How to avoid specificity problems
• A checklist to use before publishing

Why best practices matter

CSS is forgiving, so messy code still “works”. But over time messy stylesheets become hard to change: fixing one thing breaks another. Good habits keep a project calm as it grows.

1. Start with a small reset

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
}

This gives predictable sizing, sensible text, and images that never overflow.

2. Use variables for repeated values

Store colours, spacing, and radii in :root variables, as you learned in the Variables lesson. One change then updates the whole site.

3. Style with classes

• Prefer classes over ids and over long chains of element selectors.
• Keep selectors short: .card-title beats div.main section article h2.title.
• Avoid !important. It is a sign that specificity has gone wrong, and it makes later overrides harder.

4. Name things by purpose

/* Good: describes the purpose */
.card { }
.card-title { }
.btn-primary { }

/* Poor: describes appearance, which may change */
.blue-box { }
.big-red-text { }

A common convention is BEM (Block, Element, Modifier): .card, .card__title, .card--featured. Pick one naming style and use it consistently.

5. Keep it organised

• Group rules in a logical order: variables and reset, base elements, layout, components, utilities, media queries.
• Use comments as section headings.
• Put related properties together (layout, then spacing, then colour, then text) so rules are easy to scan.
• Split big projects into several files, then combine them for the live site.

6. Go mobile first

Write small-screen styles first and add min-width media queries. Test at several widths and on a real phone.

7. Avoid repetition

/* Repeated */
.a { color: #082b59; padding: 12px; border-radius: 8px; }
.b { color: #082b59; padding: 12px; border-radius: 8px; }

/* Shared */
.a, .b { color: #082b59; padding: 12px; border-radius: 8px; }

8. Keep it accessible

• Check colour contrast between text and background.
• Never remove focus outlines without a clear replacement.
• Use rem for font sizes so people can enlarge text.
• Respect prefers-reduced-motion.
• Do not use colour alone to show meaning.

9. Keep it fast

• Remove unused CSS and old commented-out code.
• Load only the fonts and weights you need.
• Animate transform and opacity, not layout properties.
• Link a single minified stylesheet on a live site if you can.

10. Check your work

• Use developer tools (F12) to inspect elements and see which rules apply.
• Run the W3C CSS Validator to catch typos.
• Test in more than one browser.

Before-you-publish checklist

1. Box-sizing, margins, and images are reset or controlled.
2. Colours and spacing come from variables.
3. No unnecessary !important or id selectors.
4. Class names describe purpose.
5. Layouts work at phone, tablet, and desktop widths.
6. Text contrast is sufficient and focus styles are visible.
7. No unused rules or leftover test code.

Common mistakes

• Fighting specificity with !important instead of simplifying selectors.
• Copying large snippets you do not understand.
• Styling with inline style attributes everywhere.
• Never testing on small screens.

<style>
  .intro { color: #082b59; }
  .a, .b { background: #eaf5ff; padding: 12px; }
</style>
<div class="main">
  <p class="intro">Intro</p>
</div>
<div class="a">A</div>
<div class="b">B</div>

Summary

• Reset, variables, and short class-based selectors keep CSS simple.
• Name by purpose, organise in sections, and avoid !important.
• Build for accessibility and speed, and test before publishing.