CSS Nesting - Without SASS & Compilers!

Greetings, fellow front-end enthusiasts! Today, let's discuss something revolutionizing our CSS experience - CSS Nesting. And no, we're not just referring to preprocessors like SASS or LESS anymore. CSS Nesting has officially entered the realm of native CSS, and it's time to get excited!

CSS Nesting: Not Just a Preprocessor Feature Anymore!

For years, if you wanted to use nesting in your CSS, you had to rely on preprocessors. These tools allowed us to write CSS in a more readable and maintainable way by letting us nest our selectors. But now, this much-loved feature is no longer exclusive to preprocessors. Native CSS has embraced nesting, bringing this powerful syntax directly into our browsers.

The Evolution of Nesting in CSS

Initially, nesting was a feature that many front-end developers admired in preprocessors. It simplified how we wrote and read CSS by allowing styles to be grouped to reflect the HTML structure. This meant less repetition and clearer code. As CSS evolves, it’s adopting these beneficial practices, making them a standard part of the language.

How Does Native CSS Nesting Work?

Let's break it down with an example. Before, without preprocessors, you had to write CSS like this:

CSS Code: Without Nesting

.navbar {
  /* Navbar styles */
}

.navbar .nav-item {
  /* Nav item styles */
}

.navbar .nav-item .nav-link {
  /* Nav link styles */
}

But with CSS Nesting, it becomes:

CSS Code: With Nesting

.navbar {
  /* Navbar styles */

  .nav-item {
    /* Nav item styles */

    .nav-link {
      /* Nav link styles */
    }
  }
}

This nested structure is easier to read and mirrors the HTML architecture, making it more intuitive for development.

Browser Support: A Growing Trend

Currently, major browsers like Chrome and Firefox have started to support CSS Nesting. But remember, browser support constantly evolves, so checking the latest compatibility on resources like Can I Use is wise.

As of December 2023, Can I Use reports:

2.37% of browsers fully support CSS nesting.
78.7% of browsers have partial support for CSS nesting.

Tips for Mastering CSS Nesting

Avoid Deep Nesting

While nesting is excellent, too much can lead to complex and hard-to-maintain code. Keep it to a maximum of three levels deep.

Leverage the Ampersand (&)

The ampersand is a powerful part of nesting, especially for pseudo-classes and modifiers. For example:

Nested CSS Code With Ampersands (&)

.button {
  /* Base styles */

  &:hover {
    /* Hover styles */
  }

  &--primary {
    /* Primary variant styles */
  }
}

Learn more about nesting CSS/SCSS with Ampersands

Embrace Simplicity

Nesting should make your code cleaner and more efficient, not cluttered and convoluted. Use it judiciously to enhance readability.

CSS Nesting stepping out of the shadows of preprocessors is a significant leap for CSS. This move not only streamlines our coding process but also bridges the gap between the native capabilities of CSS and the extended features that preprocessors have offered. As front-end developers, embracing this evolution and integrating nesting into our CSS practices is an exciting time. So, let's start nesting natively and enjoy cleaner, more manageable stylesheets!

Image Credit: Adobe Firefly

The Learning Lab