For a long time, preprocessors such as Less, Sass, and Stylus were indispensable tools for web developers. They emerged as a response to the limitations of classic CSS, providing what was missing: variables, nested rules, mixins, imports, and other features that allowed for more structured and flexible code. However, with each passing year, the CSS standard evolves, incorporating the best ideas from these tools. Today, we can confidently say that some of the preprocessor features have already become a native part of the language — and one of the most anticipated such features is CSS Nesting.
What is CSS Nesting and why is it important
CSS Nesting, or nested CSS, allows you to describe styles in a logical hierarchy — just like HTML itself is structured. This means that you can now set styles for a parent element and immediately write the styling for child elements inside it, without repeating the selector name each time. This makes the code more readable, compact, and structured, especially when working with large interfaces.
In addition, the new standard supports the use of a special character &, which helps to link selectors and create class combinations, which was previously only possible in preprocessors. Thus, CSS Nesting does not simply replicate the functionality of Less or Sass — it makes it part of the standard, without the need for additional tools or compilation.
Historical parallel: jQuery and JavaScript
This situation is familiar from the history of jQuery. At one time, it was practically mandatory for DOM manipulation, event handling, and AJAX requests. But over time, native JavaScript has evolved and incorporated these capabilities directly into the language. As a result, jQuery is no longer necessary—modern developers can do without it, using pure JS.
The same thing is gradually happening with CSS: functions that previously required a preprocessor are now available “out of the box.” Variables, logical expressions, modern color models, and nesting are all already implemented or in the process of being implemented in browsers.
Is this a threat to Less, Sass, and Stylus?
Yes and no. On the one hand, the need for preprocessors is decreasing, especially for small and medium-sized projects. Modern CSS capabilities already cover 80–90% of typical tasks. Developers no longer need to install additional packages, configure compilation, and monitor compatibility. Everything works natively.
On the other hand, Sass and Less are still useful for complex design systems that require more advanced logic, such as functions, loops, conditions, and mixins with parameters. These tools may remain relevant in large corporate projects or old code bases where rewriting to pure CSS is impractical.
As for Stylus, this preprocessor has always been less popular, and today its position can be described as niche. It is alive, but rarely used.
The transition to pure CSS is a matter of time
CSS Nesting is not just another feature, but a symbol of the language’s movement towards self-sufficiency. Everything that previously required external tools is now becoming part of the standard. This simplifies the development process, reduces dependence on the builder ecosystem, and makes the code more durable.
Many developers have already begun to gradually abandon preprocessors in new projects, leaving them only where they are really necessary. And, judging by the direction of CSS development, this trend will only intensify.
Conclusion
CSS Nesting is another step towards making the language a truly complete tool for creating complex interfaces. Preprocessors have played a huge role in the evolution of front-end development, but their era is gradually coming to an end. Just as JavaScript once became a self-sufficient alternative to jQuery, modern CSS is becoming a powerful and flexible language without the need for additional add-ons.
Perhaps it’s time to say, “Thank you, Less and Sass — you were great teachers. But now CSS is ready to move on on its own.”