The CSS has had a lot of changes in the last few years. We don't create it like we did in 2010 or earlier. Browsers, Hardware, and tools have undergone big changes. Modern Frameworks showed up, and the Internet has become a popular tool in human society. We implement our apps for a lot of devices with different screen sizes, and they must work (in fact, it's a delicious headache). So, CSS is a part of our life as a Frontend developer. We tried writing CSS with a preprocessor like SCSS and LESS, because they follow the goal:
Writing a clean CSS faster than before
But now I have a question:
Do We Still Need a Preprocessor like SCSS?
I have spent my time bringing an answer to this question, and I want to share it with you. Let’s break it down.
What Modern CSS Can Do
- Nesting: Native CSS nesting is here. SCSS is no longer the only way to write nested selectors.
- Variables (CSS Custom Properties): Unlike SCSS variables, CSS variables are dynamic at runtime.
- Cascade Layers & @import Replacement: This solves the “CSS specificity war” and makes imports more powerful than in SCSS.
- Container Queries & Subgrid: Imagine you have a card component with an image, title, and description. You want the text layout to adapt based on the card’s width, not the whole page width.
- Color Functions in CSS:
color-mix(): mix two colors.
lab(), lch(), oklab(): define colors in perceptually uniform color spaces.
Why this matters:
- Easier to create accessible, harmonious color palettes.
- Colors look consistent across browsers and devices.
- You can dynamically adjust colors in CSS without a preprocessor (no SCSS needed).
Where SCSS Still Wins
SCSS also has advantages, and they are so useful:
- Mixin and Functions: You can write reusable logic with them, and they don't have in pure CSS
- You can split CSS into small, maintainable chunks. It makes file management easy.
- Loops, conditionals, and calculations are useful SCSS features.
My Take as a Frontend Dev
Modern CSS can replace most of SCSS features, but SCSS is becoming more niche. We have a big problem here:
Browsers support.
Browsers don't support some of the modern CSS features yet, and this creates a problem for large-scale, international, and enterprise projects. Because, all users don't update their Browsers, and we are facing different users and devices. We must anticipate and meet the needs of most users.
After that, in the large-scale projects, we need to use advanced logic like loops or complex mixins. Maybe we can handle it with CSS, but SCSS has good support for doing them, and it's a fact.
I don't say you must remove SCSS from your development life and implement your project with modern CSS, because:
SCSS isn't dead.
Just like jQuery, still useful, but not the default choice anymore.
What do you think? Are you still using SCSS, or have you moved fully to native CSS?
Top comments (0)