CSS Indentation Best Practices

Indentation is the single most important factor in code readability. In CSS, indentation visually groups properties to their parent selector and visually groups nested blocks (like media queries or `@supports` statements) to their context.

Tabs vs. Spaces

The eternal debate: Tabs or Spaces? In the context of modern web development, 2 spaces has become the de facto standard for CSS, HTML, and JavaScript, heavily popularized by open-source projects, standard formatters, and style guides from companies like Google and Airbnb.

However, the most important rule is consistency. If you choose tabs, or if you choose 4 spaces, use it universally across the entire file.

Indenting Properties

Every property inside a CSS ruleset must be indented exactly one level deeper than the selector.

.hero-section {
  width: 100%;
  background: var(--bg-main);
}

Indenting Nested Blocks (Media Queries)

When using block-level statements like @media or @supports, the entire ruleset inside that block must be indented one level deeper. This creates a clear visual hierarchy of what applies when.

.container {
  padding: 1rem;
}

@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 768px;
  }
}

Using a Tool to Fix Indentation

If you are working on a file where some developers used tabs, some used 2 spaces, and some used 4 spaces, manually fixing the file is a waste of time. This is where an automated beautifier shines.