It’s no secret that web design evolves at a rapid pace. Not only do the trends change, but so do the tools and technologies we use. We’re constantly under pressure to keep up.
That’s why I find my workflow a bit ironic. Yes, I realize change is a part of the profession. And yet I tend to stick with a familiar approach to each challenge.
Nowhere is this more apparent than when it comes to using CSS. It seems like every few years, some revolutionary new feature gets a lot of attention. And while I find it interesting, I’m usually not an early adopter.
Perhaps there’s no harm – provided the techniques I use work as intended. But inevitably, a project comes along that pushes my existing knowledge to the limits. And it’s usually then, after a period of frustration, that I finally dig in and learn something new.
If you’ve ever found yourself 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 a complex layout traditionally has 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 cobbling together a layout using CSS floats and clearfixes is neither stable nor elegant. There are no guarantees that these techniques will hold up over time. If your content needs change, for example, you might find that the layout simply breaks.
It’s worth noting that floats and clearfixes came about at a time when CSS didn’t have a simple method for creating multicolumn layouts. Back then, these were among the few acceptable solutions.
However, the additions of both Flexbox and CSS Grid have been game-changers. They’re designed specifically for these types of layouts and have some degree of responsiveness built in. In addition, they typically require less code than those old-school hacks.
Taken together, this should result in code that is much easier to maintain over the long term.
Use of Legacy Browsers Is Plummeting
Among the primary reasons not to adopt modern CSS has been 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 also be a hack in their own right. They were also one more piece of code to maintain.
This wasn’t a huge problem for visual effects like border-radius, where the browser just ignores what it doesn’t understand. But approximating newfangled layouts in old browsers could be very challenging. It often kept me from wanting to implement a feature such as CSS Grid.
But usage for these technological fossils has become minuscule. Internet Explorer has been (partially) retired by Microsoft and is in use by less than half a percent of users. Similar numbers have been reported for legacy versions of Safari as well.
That’s not to say offering a solid fallback isn’t helpful. But the data shows that we no longer need to hold back on implementing new features, either.
More CSS Knowledge = More Versatility
Then there’s the old problem of trying to fit a square peg into a round hole. There are numerous style and layout challenges out there, and they all require unique solutions.
CSS is part of what moves the web forward. That’s reflected in what we see every day. In addition, our clients have also picked up on these shifts in presentation. They now expect us to deliver that same level of quality.
Achieving modern design with old-school CSS isn’t very efficient. Not when there are new approaches that streamline the process. By clinging to the past, we’re making more work for ourselves in the long run. It may also limit our growth potential.
Thus, it stands to reason that the more tools we have in our toolbox, the more versatile designers we become. This frees us to experiment and go beyond the same old looks.
In time, this will benefit both our portfolios and clients. What’s not to like?
Expand Your CSS Superpowers
To be clear, we don’t have to use every new CSS feature immediately after it’s released. There is always a lag in browser support. And some items may not be relevant to our niche.
Still, it’s worth keeping an eye on new developments and becoming familiar with how they work. It’s something that will stay in the back of your mind. When you need it, you’ll have a handy point of reference.
It might also save you from the frustration that comes from using older techniques to solve modern challenges. This is something I continue to wrestle with. Hopefully, this article provides the necessary motivation for all of us!