Discussion on: Tell me about the worst CSS you've ever had to deal with

[Facundo Corradini]

Beating inline !important

This is gonna be awful, so brace yourselves...

Had to work with HTML generated by closed-source, god-knows-what-language, third-party legacy script that had inline !important declarations. I kid you not.
It seems that dev really, really didn't wanted anyone to adapt their style. Any request to change that would fall into the "we don't know how to do that, the original dev is long gone and nowhere to be found" category.

I was tasked with changing those styles to better suit the website. "impossible" was my first thought, both internal !important and external !important would fall short to change such an absurd priority. Then I remembered the only way to beat internal !important: animations.

So the first step in fixing this mess was to create instant animations that used keyframes to beat the priority.

But it wouldn't be so "simple", oh no. The code didn't had classes or a structure I could easily target with element selectors, so I had to use attribute selectors targeting the style attribute that matched the properties.

Something the likes of

<!-- HTML with inline, important styles setting blue font -->
<p style="color:blue !important">test</p>

/* external CSS, the only thing I was allowed to change */
[style*="color: blue"] {
  animation: change-color 0.1ms forwards;
}

@keyframes change-color {
  to {
    color: red;
  }
}

And it worked. The final output of that code will be red text, beating the inline !important declaration that tries to set it to blue.

Of course the real case was much more complicated than that example, as there was lots of conflicting stuff that made the hack quite complex and fragile. Not fun. At all.

But at the end of the day I got the thing working, feeling extremely proud. And extremely ashamed.