Native CSS Nesting instead of CSS Preprocessors

I recently changed the way I write my stylesheets, and I think you should think about doing the same. If you’ve been using CSS preprocessors like Sass or Less mainly for nesting, it might be time to go back to plain CSS. Why? Because CSS nesting is now supported natively!

Table of Contents

Why I Made the Switch to Native CSS Nesting

In the past, preprocessors were essential for keeping CSS clean and readable. Nesting helped me organize styles in a way that avoided repetitive selectors. But now that native CSS nesting is available, I don’t need preprocessors anymore, and it has really simplified my workflow.

Check out how things used to look with preprocessor:

.foo .bar a {
  color: red;
}

.foo .bar a:hover {
  color: blue;
}

.foo .bar a:focus {
  border: 1px solid black;
}

This worked well, but preprocessors like Sass would expand these rules, making the file sizes larger. Now, with native CSS nesting, I can keep the same structure without the extra bulk.

Here’s how it looks now:

.foo .bar a {
  color: red;

  &:hover {
    color: blue;
  }

  &:focus {
    border: 1px solid black;
  }
}

Key Benefits:

No Need for Build Tools

One of the best things for me is that I no longer need any build tools for CSS nesting. I used to rely on a build process to compile my preprocessed CSS, which slowed everything down. Now, I can just write plain CSS, and the browser takes care of it. This has simplified my development setup and cut down on build times.

Smaller CSS File Size

Preprocessors often expand CSS rules during compilation, which can bloat the final file size. With native CSS nesting, I can keep my stylesheets more streamlined and efficient. This helps with load times and overall performance.