Although new CSS features and properties are developed and released every year, web developers rarely learn them or use them in their projects.
This is an issue because the CSS Working Group — the team of developers who maintain and improve CSS specs — measures success by looking at the adoption rate of those new features.
This is a chicken-and-egg problem. If the community doesn’t adopt and implement new features, the working group won’t bother maintaining them. On the other hand, if the working group doesn’t work to improve features, users likely won’t adopt them.
But if we can all agree that it’s important to update your JavaScript and React code, why do we tend to think it’s not worth the effort to update CSS? Let’s explore some possible reasons why people aren’t using new CSS features in 2020.
In any project, the budget influences what is prioritized during development. Implementing CSS features costs developers time, which impacts the project owner’s bottom line. Your client may deem your time better spent optimizing other features.
You could attempt to find workarounds for features that aren’t supported by the browser, but unlike JavaScript, which uses Babel to do exactly that, CSS affords you no such luxury.
A new project may have just a few CSS rules here and there. But as it develops and expands, your small CSS rules can quickly become a tangled spaghetti monster. CSS needs to be lean and easy to understand, so it’s usually better to go with stable features that are already production-ready.
Most websites don’t even bother with CSS in the early stages because they can just use Bootstrap and call it a day. Only after it gains some traction will stakeholders consider developing a more tailored style that’s consistent with their branding. Even then, there are often more pressing tasks than upgrading CSS.
The primary goal of writing CSS is to describe the presentation of your website, rendering it aesthetically pleasing and easy to understand. CSS helps developers achieve that goal by manipulating two things: layout and design. Layout describes columns and rows, while design refers to colors, fonts, spacings, animations, and borders.
I think we can all agree that the current state of CSS handles these well enough. Sure, some parts could be better optimized. But there are only so many hours in a day. When you do have spare time, how likely are you to focus on optimizing CSS instead other things? As long as it’s not broken, why fix it?
React and Vue have regular community conferences. Even JavaScript holds a conference once in a while. But what about CSS? How do you keep up with its development and stay in the loop about new features?
CSS doesn’t have versioning, and it doesn’t need it. Without conferences, there’s no excitement. People simply don’t pay much attention to the development of the tech they use. We’re all too busy building apps for our clients. The only way to keep up with CSS is to read the documentation. But why bother when old technology will suffice?
Unlike frameworks and programming languages, CSS doesn’t have patches for security issues. As for the design itself, most clients only care that their website looks exactly how they imagined it. There’s just not enough incentive for developers to keep up with CSS.
Let’s say you did the hard work of mastering new CSS features. How do you show that to potential clients or employers? You can’t put “CSS beyond CSS3” on your resume. CSS3 was a great success in the world of CSS development because it compelled:
With huge demand comes great opportunity. Books, courses, and tutorial videos were released to help people learn about CSS3. Then there are layout models like Flexbox and Grid, though they are not part of CSS3.
Some developers advocate for putting all new CSS features under the banner CSS4. But then how do we define CSS4? What modules do we include or exclude? If it doesn’t introduce any drastic changes from CSS3, will the community even adopt it? Wouldn’t it be better for developers to spend their time on other things that are more visible and easier to market?
It’s hard for anyone to say how these issues can be resolved. Unlike frameworks and languages, which have a timely release date, CSS just rolls out new features into the wild and waits to see whether browser vendors, developers, and business leaders pick them up.
If you’re interested in diving deeper, the CSS Working Group is facilitating a lengthy conversation on GitHub to define what CSS4 is and how it might help push people to use new CSS features.
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — start monitoring for free.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Angular’s two-way data binding has evolved with signals, offering improved performance, simpler syntax, and better type inference.
Fix sticky positioning issues in CSS, from missing offsets to overflow conflicts in flex, grid, and container height constraints.
From basic syntax and advanced techniques to practical applications and error handling, here’s how to use node-cron.
The Angular tree view can be hard to get right, but once you understand it, it can be quite a powerful visual representation.
2 Replies to "5 reasons why people aren’t using new CSS features"
Thanks for sharing such reasons, I haven’t knew that.
Thanks for the update