Skip to content

The CSS Report

The CSS Report analyzes your stylesheets for quality, maintainability, and adherence to best practices. Well-organized CSS makes your code easier to understand, modify, and scale. The goal of this report is to help you level up as a developer by identifying areas for improvement. Use the feedback to practice refining and improving your code—this iterative process is how real growth happens.

Table of contents

  1. How it works
  2. Common issues detected
  3. Why clean CSS matters
  4. Acting on your report

The CSS Report checks your stylesheets for quality, maintainability, and common pitfalls. Well-organized CSS is easier to read, change, and scale. Use these findings to build stronger styling habits as you go.

How it works

When you submit a solution, we use stylelint to run an automated check on your CSS. We've added custom linting rules based on recommended best practices, prefixed with frontend-mentor/ in the report.

The report audits all CSS, SCSS, and Less files in your repository.

Going deeper with the AI code review

These automated checks catch concrete, rule-based issues. For feedback that looks at your CSS architecture, responsive patterns, and modern CSS choices across your whole solution, the AI code review scores your code across several dimensions, including Best Practices and Architecture. Pro members get it on every submission, and free members get one a month. See The AI Code Review to learn more.

Common issues detected

Overly specific selectors

High specificity makes CSS harder to maintain and override.

Instead of:

body div.container section.content article.post h2.title {
  color: #333;
}

Use:

.post-title {
  color: #333;
}

Duplicate styles

Repeated declarations increase file size and create maintenance headaches.

Instead of:

.card {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modal {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Use:

.card,
.modal {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Or use CSS custom properties for shared values.

Magic numbers

Unexplained numbers make code hard to understand.

Instead of:

.header {
  height: 73px;
  padding-top: 17px;
}

Use:

:root {
  --header-height: 4.5rem;
  --header-padding: 1rem;
}

.header {
  height: var(--header-height);
  padding-top: var(--header-padding);
}

Avoiding !important

Reaching for !important is usually a sign of a specificity problem. Fix the underlying specificity instead.

Why clean CSS matters

Maintainability: well-organized CSS is easier to update and debug.

Performance: removing duplicate and unused styles reduces file size.

Collaboration: consistent patterns make it easier for others, and future you, to work with the code.

Acting on your report

Review your CSS Report findings and prioritize:

  1. Errors first: issues that could cause problems.
  2. Warnings second: quality issues worth addressing.
  3. Info items: best-practice suggestions to consider.

Building good CSS habits early makes your stylesheets far easier to manage as projects grow.

PreviousThe HTML Report
NextThe JavaScript Report