Common CSS anti-patterns - Mini Project: Build & Apply

Common CSS Anti-Patterns

📖 Scenario: You are working on a simple webpage for a local bakery. The page has a header, a navigation menu, a main content area with product listings, and a footer. The bakery wants the page to look clean and be easy to maintain.

🎯 Goal: Learn to identify and fix common CSS anti-patterns by creating a clean, maintainable CSS file for the bakery webpage. You will start by writing some CSS with anti-patterns, then improve it step-by-step.

📋 What You'll Learn

Create CSS rules using class selectors only

Avoid using IDs for styling

Use CSS variables for colors

Use Flexbox for layout instead of floats

Avoid !important declarations

💡 Why This Matters

🌍 Real World

Web developers often inherit messy CSS with anti-patterns. Learning to spot and fix these helps keep websites maintainable and scalable.

💼 Career

Understanding CSS best practices and anti-patterns is essential for front-end developers to write clean, efficient, and accessible stylesheets.

1

Create initial CSS with anti-patterns

Write CSS rules for the bakery page using IDs for styling. Use #header to set background color to #f8b400, #nav to float left with width 200px, and #footer to have text color white and background color black. Use !important to force the footer text color.

CSS

/* Write CSS rules using IDs and !important declarations */
#header {
  /* Your code here */
}
#nav {
  /* Your code here */
}
#footer {
  /* Your code here */
}

Need a hint?

Use #header, #nav, and #footer selectors. Use !important only on footer text color.

2

Add CSS variables and switch to class selectors

Create CSS variables for --main-color with value #f8b400 and --footer-bg with value black inside the :root selector. Replace the ID selectors with class selectors: use .header, .nav, and .footer. Remove the !important declaration from the footer text color.

CSS

:root {
  /* Your code here */
}
.header {
  /* Your code here */
}
.nav {
  /* Your code here */
}
.footer {
  /* Your code here */
}

Need a hint?

Define CSS variables inside :root. Change selectors from IDs (#) to classes (.). Remove !important.

3

Replace float layout with Flexbox

Remove the float property from the .nav selector. Add a new class selector .container that uses Flexbox with display: flex. This container will hold the navigation and main content side by side. Set the .nav width to 200px and add flex-grow: 1 to a new class .main for the main content area.

CSS

:root {
  --main-color: #f8b400;
  --footer-bg: black;
}
.header {
  background-color: var(--main-color);
}
.container {
  /* Your code here */
}
.nav {
  /* Your code here */
}
.main {
  /* Your code here */
}
.footer {
  color: white;
  background-color: var(--footer-bg);
}

Need a hint?

Use display: flex on .container. Remove float from .nav. Add flex-grow: 1 to .main.

4

Remove !important and finalize clean CSS

Ensure there are no !important declarations anywhere in the CSS. Confirm all colors use CSS variables. The final CSS should have :root with variables, class selectors .header, .container, .nav, .main, and .footer with clean, maintainable styles using Flexbox and variables.

CSS

:root {
  --main-color: #f8b400;
  --footer-bg: black;
}
.header {
  background-color: var(--main-color);
}
.container {
  display: flex;
}
.nav {
  width: 200px;
}
.main {
  flex-grow: 1;
}
.footer {
  color: white;
  background-color: var(--footer-bg);
  /* Remove !important if present */
}

Need a hint?

Check that !important is removed and all colors use variables.