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 */
}

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 */
}

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);
}

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 */
}

Hint

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

Practice

1. Which of the following is considered a common CSS anti-pattern that can make your styles hard to maintain?

easy

A. Using semantic HTML elements like <header> and <footer>

B. Using !important excessively to override styles

C. Writing CSS with clear and simple selectors

D. Using CSS variables for colors and fonts

Solution

1. Step 1: Understand the impact of !important

   Using !important forces styles to override others, which can cause confusion and difficulty in debugging.

2. Step 2: Compare with good practices

   Using semantic HTML and clear selectors improves maintainability, while !important overuse is a known anti-pattern.

3. Final Answer:

   Using !important excessively to override styles -> Option B

4. Quick Check:

   Excessive !important = Anti-pattern [OK]

Hint: Avoid !important unless absolutely necessary [OK]

Common Mistakes:

• Thinking !important is always good for quick fixes
• Confusing semantic HTML with CSS anti-patterns
• Believing CSS variables cause maintenance issues

2. Which CSS syntax is correct to avoid the anti-pattern of deep nesting?

easy

A. nav ul li a { color: blue; }

B. nav { ul { li { a { color: blue; } } } }

C. nav > ul > li > a { color: blue; }

D. nav ul li a { color: blue !important; }

Solution

1. Step 1: Identify valid CSS syntax

   nav { ul { li { a { color: blue; } } } } uses nested blocks like SCSS, which is invalid in plain CSS. Options A, C, and D are valid CSS syntax.

2. Step 2: Choose syntax avoiding deep nesting

   nav ul li a { color: blue; } uses simple descendant selectors without deep nesting or unnecessary specificity, avoiding anti-patterns.

3. Final Answer:

   nav ul li a { color: blue; } -> Option A

4. Quick Check:

   Simple selectors avoid deep nesting [OK]

Hint: Use flat selectors, avoid nested blocks in CSS [OK]

Common Mistakes:

• Confusing SCSS nesting with CSS syntax
• Using !important unnecessarily
• Overusing child selectors causing deep nesting

3. What will be the visual result of this CSS on a button?

button {
  width: 300px;
  padding: 1rem;
  background-color: lightblue;
}

Consider the anti-pattern of fixed widths.

medium

A. Button width stays fixed at 300px on all screen sizes

B. Button width adjusts automatically to content size

C. Button width becomes 100% of the container

D. Button width shrinks below 300px on small screens

Solution

1. Step 1: Understand fixed width effect

   The CSS sets a fixed width of 300px, so the button will always be 300px wide regardless of screen size.

2. Step 2: Consider responsive behavior

   Because width is fixed, the button won't adjust or shrink on smaller screens, which is an anti-pattern for responsive design.

3. Final Answer:

   Button width stays fixed at 300px on all screen sizes -> Option A

4. Quick Check:

   Fixed width = no responsiveness [OK]

Hint: Fixed width means no size change on different screens [OK]

Common Mistakes:

• Assuming padding affects width instead of content spacing
• Thinking width auto adjusts with fixed px value
• Confusing fixed width with max-width

4. Identify the error in this CSS snippet that demonstrates an anti-pattern:

.container {
  color: red !important;
}

.container {
  color: blue;
}

medium

A. The colors will blend and show purple

B. The syntax is invalid because of multiple color properties

C. The !important should be placed on the second color

D. The second color declaration is ignored due to !important

Solution

1. Step 1: Understand !important effect on CSS rules

   The color: red !important; overrides any later declarations without !important.

2. Step 2: Analyze the order of declarations

   The second color: blue; is ignored because the first has !important, causing an anti-pattern of forced overrides.

3. Final Answer:

   The second color declaration is ignored due to !important -> Option D

4. Quick Check:

   !important overrides later rules [OK]

Hint: Later rules ignored if earlier has !important [OK]

Common Mistakes:

• Thinking colors blend automatically
• Believing multiple same properties cause syntax errors
• Assuming !important can be moved freely without effect

5. You want to avoid the anti-pattern of repeated styles in CSS. Which approach below best solves this problem for multiple buttons with similar styles?

hard

A. Use inline styles on each button element to customize colors

B. Write separate CSS rules for each button with repeated properties

C. Use a shared class with common styles and add specific classes for differences

D. Use !important on all button styles to ensure they apply

Solution

1. Step 1: Identify the problem of repeated styles

   Writing repeated styles for each button causes maintenance issues and code bloat.

2. Step 2: Choose the best practice to reuse styles

   Using a shared class for common styles and specific classes for differences avoids repetition and keeps CSS clean.

3. Final Answer:

   Use a shared class with common styles and add specific classes for differences -> Option C

4. Quick Check:

   Shared classes reduce repetition [OK]

Hint: Use shared classes for common styles, specific for differences [OK]

Common Mistakes:

• Using inline styles causing repetition and harder maintenance
• Overusing !important instead of organizing styles
• Writing separate full rules for each similar element