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

How It Works

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

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

AI-Enhanced Reports (Pro)

Pro subscribers receive AI-enhanced analysis that goes beyond stylelint:

  • Architecture & layout - Evaluates your layout strategy (Grid vs Flexbox), responsive patterns, and component reusability
  • Modern CSS - Identifies opportunities to use custom properties, logical properties, and container queries
  • Performance - Flags paint/reflow triggers, inefficient selectors, and animation choices that impact performance
  • Maintainability - Catches magic numbers, theme inconsistencies, and cascade logic issues

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

Using !important is usually a sign of specificity problems. Fix the underlying specificity issue 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 (or 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 will make your stylesheets more maintainable as projects grow.

PreviousThe HTML Report
NextThe JavaScript Report