CSS Can Do What Now?!
We all know the CSS blinds meme, right? Or the CSS is Awesome text that exceeds the box? These seem to appeal to many developers these days, perhaps even more than in the past. We've started leveraging JavaScript or TypeScript-oriented frameworks and features, while relying on Tailwind to help us style our interfaces.
We've drifted away from one of the main pillars of the web: CSS is not a main focus anymore but an afterthought—something to slap onto a bit of interactive code. Leaning on these frameworks can lead to lower maintenance and more up-to-date knowledge of CSS.
First of all, I’m not a CSS specialist or expert. I’m just a regular Joe sharing his journey and recent CSS feature discoveries. These discoveries were made in an organization that’s not primarily a tech company. At Jumbo Supermarkten, we do groceries, and tech is just a means to deliver services to our customers or expose features for internal use by our colleagues. This context is important because not being primarily focused on tech affects the attention and focus we have on our digital products. Even for tech-invested companies, with such a broad landscape these days, it can become a pitfall to overlook certain areas.
While I was seeing tweets, blogs, newsletters, and headlines about the latest CSS features, I was in the headspace of thinking: “Looks great, but how’s support? I’ll probably have to polyfill and maintain both the code and polyfill,” or “What’s this one good feature going to do for me?” It took me a while before it clicked!
Meanwhile
The major browser companies are cranking out support for new features at a very good speed and are keeping the momentum. Update strategies are much more reliable as well: most browsers tend to keep themselves up to date at a reasonable pace. I remember when IE support was still a thing, which honestly didn’t help my mindset!
The CSS working group is also progressively adding more and more useful features to the language specification. The way these features get implemented is spot-on, with a good developer experience as well.
Crash Course Confessions
For a conference, I was working on showcasing the current state of CSS, and the more I worked on the content, the more I realized that I had vast knowledge gaps. So this was becoming a story of things I didn’t know CSS could do.
I also want to stress that it’s okay not to know everything and that, once you realize this, you can take appropriate actions to close that knowledge gap.
Now What?
Now that we’ve seen a bunch of features—and trust me, there’s a lot more to uncover once you dive into this—what’s the best course of action?
It Depends
The classic developer answer to all questions, big or small. But of course, it does depend on certain factors. For instance, are you running a Sass-like codebase? You can consider slowly opting out of certain capabilities and start leveraging plain old CSS for those. Cases like nesting are perfect for lifting them out of your build step. The more you can offload, the easier maintenance becomes!
Have you adopted a Single File Component strategy? Then maybe you can, as part of regular maintenance, look into upgrading them gradually in small increments. In this case, it helps to set clear guidelines and use tooling to make this transition smooth, because it might turn out to be a lengthy journey.
Layering
The layering capabilities provide excellent means of both relying on existing rules, safely scoping them to a “legacy” layer, and adding new layers to help with organizing the latest standards and rules.
Opportunities
With current-day support and technology, you can rely less on third-party tools or build steps. This allows you to clean up CPU-heavy JavaScript interactions and return to core web technologies. These technologies are here to stay, so you have an opportunity to increase the sustainability of the code you’re responsible for.