If you learned CSS anytime before 2020, chances are that you collected a lot of little hacks along the way. You know, things like centering, styling form elements, sizing images, wrapping text... Black magic things. Incredibly specific behaviors that you look up in google, hoping that someone wrote a blog post about it, and that will ruin your day otherwise.
A lot of my colleagues look at CSS with utter suspicion, because they had to learn it 10 years ago, before moving to back-end programming, project management, design or even "JS-only front-end".
Lot of people even look at developers using CSS like strange creatures, the ones who tamed the beast, the ones who could see through an impenetrable jungle of CSS hacks and make sense of it, at the expense of their own sanity.
But the truth is this:
We don't like CSS hacks
Personally, I hate them. They might be fun to show to a student or colleagues struggling with a bit of strange layout behavior (tadaaaa !), but I despite them, because they're just workarounds, or ugly non-standards way of using properties that never were made for this. They are anything but good code. They are enigmatic code, maintenance nightmare, and probably the worse, they create a mistrust towards CSS that in the end hurts the whole ecosystem.
And that's how you get Peter Griffin struggling with CSS, vertical alignment jokes... Heck, I even have the ironic "CSS is awesome" mug as my twitter cover image.
These jokes helped us cope with the harsh reality of CSS for years, but the truth is that they are now out of date. If anything, using them is like publicly announcing:
I learned CSS 10 years ago, hated it and never tried again! (insert miracle CSS-in-JS library presentation here)
Yep, that Twitter banner definitely has to go...
Will 2022 start the era of no-hacks CSS?
A lot is happening to CSS these days, and I feel 2022 could be the year we get rid of CSS hacks, or at the least the year we stop considering them "everyday CSS".
Just take a look at this thread, for exemple.
Things are moving fast and CSS is becoming a mature language. Even the browsers community is organizing itself to make CSS level-up in the best possible way. See the Interop initiative, for example.
The accent-color example
The accent-color property is quite simple and one of my favorite new things.
Its unique purpose is to allow you changing the color of the native form inputs: checkboxes, radio buttons, range selectors... Check it out:
:root {
accent-color: crimson;
}
That's one line of CSS and zero hacks.
For years (dare I say decades?), CSS developers achieved that by actually hiding the native input and creating a fake input with the desired appearance. Both were linked with the good old :checked pseudo-class. This was never normal code. It was a dirty and error-prone hack, waiting patiently to be replaced by a clean solution.
Leaving hacks behind is also your responsibility
The accent-color property is a good example of that. Yes, it's new and not supported by every browser.
Well, I could not care less about this.
Because CSS is awesome, it will simply ignore accent-color in older browsers and use the default system colors. Which is very fine (just test the contrasts if your background is not white).
Even better, as time goes by, more and more people will have a browser supporting this and will see the intended final design. That's progressive enhancement magic: your website is getting better while you're not even working.
Me not caring about this doesn't mean that everyone won't or even should. Maybe a designer or a manager will decide that it would be nice to have the brand color for inputs, even on older browsers, and I respect that. But that is not only a design question, they are costs and benefits.
So I will defend the position that hacking the CSS (a hack which can break) for a fraction of the audience (a fraction that will have a great fallback anyway and will diminish with time) is not worth it is most cases.
I also love flexbox's gap property, which makes space management SO easy:
body {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
A decreasing fraction of browser don't support that and will show no gaps between items. Whether you're willing to setup a negative-margin CSS hack to handle these cases is another debate to have.
I started to make peace with the fact that a tiny (and one again, decreasing) fraction of users won't have the spaces. As long as the content is perfectly legible, this doesn't bother me.
Goodbye hacks
Of course I'm still using hacks, from time to time. But I stopped considering them common CSS.
CSS is catching up with our clever hacks and is eradicating them by providing standard, robust features. If you use (and advocate for) progressive enhancement techniques where you know that your content is still accessible without every line of intended CSS, you can use these new features at will. You'll feel free, live longer and, I believe, make better websites.
Share this to a colleague who hates CSS ;) I can't blame you. But this is 2022 and CSS has changed.
Top comments (6)
I think the CSS
accent-coloraddition is awesome, but we still can't modify the spacing between the checkmark and the border, or the icon in the checkbox. CSS is still a lot behind imo and it would take a lot of time for it to become hack-free.Hats off, Awesome article @bcalou!
This really is the key to devs embracing native elements. It's not that we don't want to use them, its that we can't mould the element into what's been designed. Until we can customize every piece of the element in the shadow DOM, their usage will remain limited.
I hear what both of you say. For me accent-color is enough to make a checkbox blend smoothly with the app styles.
Having control over the internal spacing, why not. But there is a limit beyond which a checkbox is not a checkbox anymore, and changing the icon inside is crossing that limit for me. Either the desired icon looks like a checkmark and the benefit is very small, either it looks like something else and to me that seems a lot like choosing UI over UX and accessibility.
So while I hope that
accent-colorwill motivate devs to use the native elements, I also think that, like James said, we should embrace them and give up on the idea that we should be able to customize every pixel of them (which of course turns to another problem when you need to speak to designers ! but I think a lot of them can understand that. At least it's worth a try).The old argument of supporting outdated browsers is itself a hack for "Common Office Environments", which freeze intranets into IE6 because of their reliance on outmoded tech like ActiveX. They are costly to maintain, rivaling the upgrade cost to keep the COE on the latest browser.
We need to keep browsers up to date for security patches anyway. Better to keep one browser for the old intranets and a latest browser for everything else, and embrace Progressive Enhancement.
I don't think it'll go away for a long time just because so much legacy code uses the hacks and developers new and old look up tutorials and guides that are not using mostly hacks. The unfortunate reality.
I think this hits the nail on the head