It’s no secret that web design changes at a rapid pace. Not only do the trends change, but so do the tools and technologies we use. We are always under pressure to keep up.
That’s why my workflow is a bit ironic. Yes, I understand that change is part of the profession. And yet I tend to stick to a familiar approach to every challenge.
Nowhere is this more evident than when it comes to using CSS. It seems like every few years, some revolutionary new feature gets a lot of attention. And while it’s interesting to me, I’m usually not an early adopter.
Perhaps there is no harm – provided I use the techniques as intended. But inevitably, a project comes along that pushes my current knowledge to the limit. And usually then, after a period of frustration, I finally give in and learn something new.
If you are ever in a similar situation, this article is for you. Together, we’ll look at why it’s important to keep up with the latest CSS techniques. And even if your current solutions work adequately, there are still reasons to invest in learning.
New Features are often easier to maintain
Using older CSS features to create complex layouts has traditionally meant resorting to hacks. That’s not always a bad thing, as it can be a great way to learn the inner workings of the language.
The downside is that it is neither stable nor elegant to layout using CSS floats and clear settings. There are no guarantees that these techniques will hold up over time. If your content needs change, for example, you may find that the layout is broken.
It’s worth noting that floats and clear settings happened at a time when CSS didn’t have a simple way to create multi-column layouts. Back then, these were among the few acceptable solutions.
However, many games have been added with the additions of Flexbox and CSS Grid. They are specifically designed for this type of layout and have some built-in responsiveness. Plus, they usually require less code than the old-school hacks.
Taken together, this should result in code that is much easier to maintain in the long term.
The Use of Legacy Browsers is Obsolete
Among the primary reasons no Adoption of modern CSS was given spotty support in legacy browsers. If you needed to cater to those using the likes of Internet Explorer or outdated versions of Safari, you’d be forgiven for not jumping on the latest features.
Fallback solutions were possible, but they might as well be a hack in their own right. They also had one more piece of code to maintain.
This is not a big problem for visual effects because border-radius, where the browser ignores what it doesn’t understand. But approximating a newfangled layout in old browsers can be very challenging. It often kept me from trying to implement a feature like CSS Grid.
But these technological fossils are less used. Internet Explorer has been (partially) retired by Microsoft and is used by less than half a percent of users. Similar numbers were reported for legacy versions of Safari as well.
That’s not to say it isn’t helpful to offer a solid return. But the data shows that we no longer need to hold back on implementing new features, either.
More CSS Knowledge = More Flexibility
Then there is the old problem of fitting square pegs into round holes. There are many style and layout challenges out there, and they all require unique solutions.
CSS is part of what moves the web forward. That can be seen in what we see every day. Additionally, our clients have noticed these changes in presentation. They now expect us to provide that same level of quality.
Achieving a modern design with old-school CSS is not very efficient. Not when there are new approaches that streamline the process. By clinging to the past, we are doing ourselves more work in the long run. It may also limit our growth potential.
So it stands to reason that the more tools we have in our toolbox, the more versatile designers we will be. This allows us to experiment and go beyond the same old looks.
Over time, this will benefit both our portfolios and our clients. What’s not to like?
Expand Your CSS Powers
To be clear, we don’t need to use every new CSS feature right after it’s released. Browser support is always slow. And some items may not be relevant to our niche.
Still, it’s worth keeping an eye on new developments and getting used to how they work. It’s something that will stay in the back of your mind. When you need it, you’ll have a handy reference point.
It could also save you from the frustration of using older techniques to solve modern challenges. This is something I’m struggling with. I hope this article provides the motivation we all need!
