A front-end developer from Mar del Plata, Argentina. Passionate about CSS, accessibility, and JS. Currently working on "just a small fix", as I've been doing for the last 15 years.
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.
Hi, I normally contract in MSBI, SQL, Data Arcitecture, Oracle, .Net/.Net Core, API development, React, focusing on www.cryptostatto.com at the moment. Reach out if you see any synergy.
Going to make a point here which escapes most people. It kind of goes back to xslt, and in some ways links to svelte, react etc. If you can drive most code from meta data, it doesn't really matter if the css, or js is bad (of course it does, but...). The real issue is when managers and product managers won't let the developer do the right thing. There may be good reason why they won't.
I tend to look at most development as something which should/could be templated in the future unless it is domain specific. The question is whether we should go that extra mile.
Employ a css expert, Sql guru, python extroadinairre, but if they are still doing expertise two years in, something is l wrong.
This is why I am not a fan of code bashing/honour shaming.
I'm a Senior Developer and Co-host of Friday Night Deploys Podcast. I'm also a dad that likes to play video games and lift, always failing to keep it real with the kidz.
I'm not sure if this is the worst I've dealt with but it's up there and is first on the mind.
At a previous job, I was leading the development of an e-commerce website (I really shouldn't have been but that's a different story, but it does add to the CSS issue) so we had a regular contractor to focus on the designs and styling of our pages as they were specialized.
We were using bootstrap 4, which they were actually quite happy we were. For a while throughout the development, I noticed a lot of pages weren't responsive; which was quite surprising considering bootstrap's rows and columns can do a lot of the heavy lifting towards responsive layouts, but it was known that they were "working on it".
Days before launch some of the major pages still weren't responsive which was making me tense, so I decided to take a look and I had found that they had created their very own column classes using CSS Grid that didn't account for different screen sizes!
I wish I still had the CSS to show snippets off, but the worst part about this CSS to me was just making worse copies of classes already given to us by a framework.
CSS I couldn't find in a Drupal site I inherited. It was inline and I just couldn't figure out where it was coming from. Searching the code base was futile. Finally I found it in a Views (a Drupal content display tool) configuration buried under a setting I'd never even seen used before.
Latest comments (41)
For me, It was float:left or right whatever. But big relief when started using flex and grid.
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
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.
Anything dealing with emails.
One of the worst CSS I usually have to deal with every once in a while looks something like this:
One of my colleagues thinks it's best to write "COMPRESSED" CSS from start instead of compressing it later on.
Aligning elements using float:left and right and also using tags like center which i much later found out that those tags were deprecated
CSS files where the same classes were overwritten multiple times. 😅
Going to make a point here which escapes most people. It kind of goes back to xslt, and in some ways links to svelte, react etc. If you can drive most code from meta data, it doesn't really matter if the css, or js is bad (of course it does, but...). The real issue is when managers and product managers won't let the developer do the right thing. There may be good reason why they won't.
I tend to look at most development as something which should/could be templated in the future unless it is domain specific. The question is whether we should go that extra mile.
Employ a css expert, Sql guru, python extroadinairre, but if they are still doing expertise two years in, something is l wrong.
This is why I am not a fan of code bashing/honour shaming.
I'm not sure if this is the worst I've dealt with but it's up there and is first on the mind.
At a previous job, I was leading the development of an e-commerce website (I really shouldn't have been but that's a different story, but it does add to the CSS issue) so we had a regular contractor to focus on the designs and styling of our pages as they were specialized.
We were using bootstrap 4, which they were actually quite happy we were. For a while throughout the development, I noticed a lot of pages weren't responsive; which was quite surprising considering bootstrap's rows and columns can do a lot of the heavy lifting towards responsive layouts, but it was known that they were "working on it".
Days before launch some of the major pages still weren't responsive which was making me tense, so I decided to take a look and I had found that they had created their very own column classes using CSS Grid that didn't account for different screen sizes!
I wish I still had the CSS to show snippets off, but the worst part about this CSS to me was just making worse copies of classes already given to us by a framework.
All CSS scares me! 😂
CSS I couldn't find in a Drupal site I inherited. It was inline and I just couldn't figure out where it was coming from. Searching the code base was futile. Finally I found it in a Views (a Drupal content display tool) configuration buried under a setting I'd never even seen used before.