Native CSS: A Whole New Story – Part 1

In this article, I’ll explain why I personally love it more and more. We’ll explore how CSS has evolved in recent years, incorporating many features previously available only through preprocessors like SASS and LESS.

---

---

CSS Nesting

CSS Nesting is a recently introduced feature that allows for more readable and concise nested rules, similar to what was previously only possible with preprocessors like SASS or LESS.

Now, you no longer need preprocessors to write nested styles. By default, you can structure CSS like this:

article {
  color: black;

  & h1 {
    font-size: 2rem;
  }

  & p {
    line-height: 1.5;
  }
}

---

What Do Browsers Say?

Here’s an overview of browser compatibility (as of January 2025):

Browser support for CSS Nesting

---

What is @scope?

The @scope rule allows you to define a specific context or scope for CSS selectors. Instead of applying styles globally or relying on specificity battles, you can limit the effect of styles to a targeted section of the DOM.

Example:

@scope (section) {
  h1 {
    color: blue;
  }
}
Code language: CSS (css)

In this case, only h1 elements inside section tags will have the blue color. This feature provides better modularity and scoping for CSS styles.

Check the latest browser support here: @scope browser support

---

What is @layer?

The @layer rule allows you to define CSS layers with hierarchical priorities. It helps organize styles into structured sections and ensures that more important rules take precedence, even if defined later in the stylesheet.

Example:

@layer base {
  h1 {
    color: blue;
  }
}
Code language: CSS (css)

Now, let’s consider a case where order matters:

@layer utilities {
  h1 {
    color: green;
  }
}

@layer base {
  h1 {
    color: blue;
  }
}
Code language: CSS (css)

Since utilities is declared first, it takes priority over base, even though base appears later in the stylesheet.

Check @layer browser support

---

Color Scheme

Modern operating systems, browsers, and applications support both dark and light modes. CSS addresses this with the @media query prefers-color-scheme.

With this query, you can define variables and styles for different themes.

Example:

:root {
  --background-color: white;
  --text-color: black;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: black;
    --text-color: white;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}
Code language: CSS (css)

Check prefers-color-scheme browser support

---

:is and :has

:is

The :is() pseudo-class allows for shorter, more readable selectors by grouping multiple selectors into a single declaration.

Before:

section h1, article h1 {
  font-size: 2rem;
}
Code language: CSS (css)

After:

:is(section, article) h1 {
  font-size: 2rem;
}
Code language: CSS (css)

:has

The :has() pseudo-class is a relational selector that applies styles to an element based on its children, descendants, or even adjacent siblings.

Example: Apply a border only to div elements that contain a p tag.

div:has(p) {
  border: 2px solid blue;
}
Code language: CSS (css)

---

Conclusion

In recent years, CSS has evolved tremendously, integrating features that were once exclusive to preprocessors like SASS or LESS.

The introduction of CSS Nesting, @scope, @layer, and powerful pseudo-classes like :is and :has has made the language more robust and flexible, allowing developers to write more structured, readable, and modular code.

Key takeaways:

• CSS Nesting eliminates the need for preprocessors for writing nested rules, simplifying stylesheet structures.
• @scope introduces better scoping, enhancing CSS modularity.
• @layer helps define styling hierarchies, preventing conflicts and improving maintainability.
• prefers-color-scheme natively supports dark and light mode, catering to modern design accessibility.
• :is and :has enhance selector power, making CSS more expressive and efficient.

While some of these features are not yet fully supported across all browsers, the landscape is changing rapidly. Now is the perfect time to start experimenting and preparing your projects for the future of web development.

Stay tuned for the next article in this series, where we’ll dive into topics like zoom, text-wrap, and much more!