The era of no-hacks CSS
Tags: css, webdev
Published: 2022-03-28 06:57:12

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.

![A mug with "CSS is awesome" written on it but the text overflows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cs6ypfjkv8kok606kcfe.jpeg)

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:

<blockquote>I learned CSS 10 years ago, hated it and never tried again! (insert miracle CSS-in-JS library presentation here)</blockquote>

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](https://twitter.com/bramus/status/1475583226165055501), for exemple.

{% twitter https://twitter.com/bramus/status/1475583226165055501 %}

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](https://wpt.fyi/interop-2022) initiative, for example.

## The `accent-color` example

The [accent-color](https://developer.mozilla.org/en-US/docs/Web/CSS/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:

```css
:root {
  accent-color: crimson;
}
```

{% codepen https://codepen.io/bcalou/pen/XWVpOxB %}

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](https://caniuse.com/?search=accent-color).

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:

```css
body {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
```

{% codepen https://codepen.io/bcalou/pen/abEpMOx %}

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](https://dev.to/bcalou/flexbox-when-negative-margins-save-the-day-h4i) 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.