CSS's !important was added because of laws about font size for some text(twitter.com)
twitter.com
CSS's !important was added because of laws about font size for some text
https://twitter.com/stevenpemberton/status/1505839184287870981
330 comments
Engineering is doing what you can with what you've actually got. If what you've actually got is an inherited tremendous ball of spaghetti css, a need to change just one thing on the page, and scant prospects for future changes in the area, then it may be good engineering to use "!important" to make your change over a more complex solution. This is in fact the situation I find myself in at work somewhat often, although luckily I can't recall the last time I had to use "!important". But I wouldn't issue a blanket disendorsement of it.
I think one concept that's slowly coming into focus for me is just how many engineers want you to experience _their_ experience and spend your time reveling at how clever _their_ stuff is. As if they think you wake up and want to do CSS work. CSS is not the goal. The website I'm building isn't even the goal. The goal is to solve some problem.
Everything that I have to do to solve that problem is an unfortunate (but inevitable) reality. But let's be clear: the goal is to minimize as close to zero, how much time you have to spend doing these things.
CSS, like all code, is a total liability. I want to spend as little time designing and writing it as possible. Which is why I hate CSS: it demands you know the exact current and future (hahahaha) structure of your webpage. `!important` is not some panacea, but I cackle at the ignorance of suggesting that the user is wrong for misusing it.
Everything that I have to do to solve that problem is an unfortunate (but inevitable) reality. But let's be clear: the goal is to minimize as close to zero, how much time you have to spend doing these things.
CSS, like all code, is a total liability. I want to spend as little time designing and writing it as possible. Which is why I hate CSS: it demands you know the exact current and future (hahahaha) structure of your webpage. `!important` is not some panacea, but I cackle at the ignorance of suggesting that the user is wrong for misusing it.
What's the source for this, I do see they're the CSS co-designer, was this requirement originally written somewhere? I'm looking at the description of important, and I don't see this intention carried through.
https://www.w3.org/TR/css-cascade-5/#important
https://www.w3.org/TR/css-cascade-5/#importance
If the intention is indeed as described, then the CSS designers failed to communicate it properly, and not "a sign you may not understand the cascade properly."
https://www.w3.org/TR/css-cascade-5/#important
https://www.w3.org/TR/css-cascade-5/#importance
If the intention is indeed as described, then the CSS designers failed to communicate it properly, and not "a sign you may not understand the cascade properly."
I agree with that tweet there:
> If you need to set font-sizes with !important you also don't understand the cascade
If law requires you to make certain text a certain size, just do so.
Without any more background information, this explanation for !important doesn't make any sense.
> If you need to set font-sizes with !important you also don't understand the cascade
If law requires you to make certain text a certain size, just do so.
Without any more background information, this explanation for !important doesn't make any sense.
Well, my !important story - at the beginning of 2014 I joined a project that was being done for the Danish government, the JavaScript implementation of NemID which unless you're in Denmark you probably don't know what it is.
Styling in this project was done with a sass compilation to CSS, and it had hundreds if not thousands of !important declarations inside it. It seems the guy who was there before me had set up the import order of the Sass files incorrectly from more specific to less specific to some really super specific couple things on top of it all (most of the code base was in Java using GWT to compile to JavaScript, so as a consequence most of the programmers were Java guys and did not notice this), basically I cut 800kb of CSS out of the build in the first few weeks by restructuring and getting rid of !important declarations (for anyone who knows NemID you can probably see how this was definitely way too much CSS for what you need to render!)
It was my first time consulting, I sometimes thought, man if I could find the guy who did this (who was I'm told a pretty good designer) I could just follow him around and make money cleaning this stuff up! But alas, I ended up having to work for a living.
Styling in this project was done with a sass compilation to CSS, and it had hundreds if not thousands of !important declarations inside it. It seems the guy who was there before me had set up the import order of the Sass files incorrectly from more specific to less specific to some really super specific couple things on top of it all (most of the code base was in Java using GWT to compile to JavaScript, so as a consequence most of the programmers were Java guys and did not notice this), basically I cut 800kb of CSS out of the build in the first few weeks by restructuring and getting rid of !important declarations (for anyone who knows NemID you can probably see how this was definitely way too much CSS for what you need to render!)
It was my first time consulting, I sometimes thought, man if I could find the guy who did this (who was I'm told a pretty good designer) I could just follow him around and make money cleaning this stuff up! But alas, I ended up having to work for a living.
This confirms my suspicion that CSS was designed in an ivory tower.
Despite being a "good developer" cut my teeth in C++ etc always had difficulties with CSS. The mental hurdles required to understand various concepts bore no relation to anything else I had encountered in CS.
I'm sure a notable percentage of my grey hairs are attributable directly to its incredible user-unfriendliness.
Despite being a "good developer" cut my teeth in C++ etc always had difficulties with CSS. The mental hurdles required to understand various concepts bore no relation to anything else I had encountered in CS.
I'm sure a notable percentage of my grey hairs are attributable directly to its incredible user-unfriendliness.
I think it’s fair to say at this point that the “semantic classes with reusable cascading CSS” experiment has lost to local, component-based solutions. Overuse of !important is just another sign of that.
Having “clean” CSS doesn’t have the same benefits as clean, well structured code in other areas. The underlying assumption that you can change the visuals without major surgery to the HTML is basically never true, so if you do put the time in to structure the CSS perfectly it’s often wasted when the design changes a little.
Also (as someone said in another comment) the lifetime of CSS is short compared to other application code and certainly compared to backend data structures and business logic, meaning the technical debt isn’t a huge issue. Iteration speed is often more important.
Having “clean” CSS doesn’t have the same benefits as clean, well structured code in other areas. The underlying assumption that you can change the visuals without major surgery to the HTML is basically never true, so if you do put the time in to structure the CSS perfectly it’s often wasted when the design changes a little.
Also (as someone said in another comment) the lifetime of CSS is short compared to other application code and certainly compared to backend data structures and business logic, meaning the technical debt isn’t a huge issue. Iteration speed is often more important.
“Anything else is probably misuse” is simultaneously true and brushes away all the realities of front end development.
If this guy was one of the designers of CSS then I have no idea why he’s acting so smug in that twitter thread.
Sure man, blame the user.
How many hours did humanity lose trying to center things in CSS?
How many hours did humanity lose trying to understand if the size of a box is set by the parent or the child?
Why not admit that CSS has been a giant shit show since inception, and that !important is just another crappy band-aid feature in that mess of a toolbox?
I have been designing APIs for 15 years and I know people misuse them all the time. And I know it’s frustrating. I also know when I have been wrong, and if I were in the man’s shoes, I’d rather be sorry that I created that monstrous piece of technology rather than blaming the millions of developers who just didn’t find any other effing way than to set !important on a random property.
How many hours did humanity lose trying to center things in CSS?
How many hours did humanity lose trying to understand if the size of a box is set by the parent or the child?
Why not admit that CSS has been a giant shit show since inception, and that !important is just another crappy band-aid feature in that mess of a toolbox?
I have been designing APIs for 15 years and I know people misuse them all the time. And I know it’s frustrating. I also know when I have been wrong, and if I were in the man’s shoes, I’d rather be sorry that I created that monstrous piece of technology rather than blaming the millions of developers who just didn’t find any other effing way than to set !important on a random property.
It should have been added to the selector instead of the attribute:
div.legaltext:important { font-size: 12pt; }
div.legaltext { font-size: 12pt !important; }
I don’t understand the sentiment. If there is a functional requirement that can only be reliably achieved with that hack, doesn’t it suggest that there are other possible functional requirements that can only be reliably achieved with that hack?
After blocking popups on some sites, the scrollbar is dtill hidden, making it impossible to scroll (like on twitter, for example). With the help of !important, the scroll bar can be forcibly turned on by adding uBlock cosmetic filters. Works on per-site basis, but can be added globally, though some sites break a bit, like the top header on Wikipedia starts behaving strangely.
https://www.reddit.com/r/uBlockOrigin/comments/ce4mok/how_to...
https://www.reddit.com/r/uBlockOrigin/comments/ce4mok/how_to...
Anyone have an idea of which part of US Code would require this? I have a hard time imagining it's that prescriptive about font sizes (especially given that different fonts have different glyph sizes, DPI on monitors results in different physical rendering sizes etc.) Only thing that comes to mind is that Apple court case many years back where the judge told them they had to have a disclaimer on their page in a certain size and color as part of the judgement.
The times I use important is generally to override a framework that is taking precedent, even though the sheet I'm editting is loaded after the framework css. That is 90% of my useage of !important. It may not have been intended for this, but a lot of things in CSS and HTML were never intended for certain use cases that they are now used for. That doesn't mean it is now misused, it just means things have evolved.
The most common use for !important is to override something else marked !important. It’s an interesting situation when getting rid of a feature simultaneously removes most of the need for it.
Sometimes a tool has been invented to do X but people end up using it for Y because it’s so useful. I think "!important" is a good example. Like duct tape being used for much more than attaching ducts.
CSS Cascade Layers are now supported by all major browsers and provide a good, standard alternative to !important in cases where you need to override CSS that you can’t easily modify, like stylesheets from a third party CMS or framework, or inherited spaghetti code from an earlier version:
https://css-tricks.com/css-cascade-layers/
https://css-tricks.com/css-cascade-layers/
I have the feeling that a lot of these people who are very smart and design things sometimes live outside of the world and don't know mere mortals issues, I might be understanding cascading and important (I don't like to use it either and avoid it), but we need to make sure that we know that we work with some legacy code, as part of a team, some decisions made before us, tight deadlines and pushy managers, I won't use !important, I might understand cascade, but I also don't want to refactor everything everytime I can't use a shortcut, when its simple changes it's fine, when it's not maybe !important + a ticket to refactor in an allocated time is a better approach
The same thing can be said for a lot of things with CSS…
The @media rule was added for one reason only: provide different styles for different media types. It wasn’t intended to be used to make responsive websites. Is using it to make responsive websites an incorrect usage?
The @media rule was added for one reason only: provide different styles for different media types. It wasn’t intended to be used to make responsive websites. Is using it to make responsive websites an incorrect usage?
That tweet is ridiculous. The World Wide Web was created for one purpose only...serve formatted documents across a network for scientists. Using !important beyond it's intended purpose is called hacking, and has been around since before there were computers. People found use beyond the main purpose of !important, and that's ok...it was a dead end, but that's beside the point.
Never use !important in your production css at all costs. In development, experiment with it all you want...maybe you'll uncover something amazing...in this case, probably not...but better to hack on things than accept what you're given.
Never use !important in your production css at all costs. In development, experiment with it all you want...maybe you'll uncover something amazing...in this case, probably not...but better to hack on things than accept what you're given.
The important statement is also useful is you're creating something to slap on some other code you have no control over. Examples of this from my experience are:
- debug tools that hijack the pages style - quickly testing styles on the browser while coding - widgets that are injected into client's websites; client's websites can be a mess, and might contain important statements themselves... - browser themes or custom styles
Sometimes it really doesn't matter that! Important is bad practice, if the alternative would be 5x more verbose and confusing. And honestly I don't care what the father of CSS thinks.
- debug tools that hijack the pages style - quickly testing styles on the browser while coding - widgets that are injected into client's websites; client's websites can be a mess, and might contain important statements themselves... - browser themes or custom styles
Sometimes it really doesn't matter that! Important is bad practice, if the alternative would be 5x more verbose and confusing. And honestly I don't care what the father of CSS thinks.
The only reason !important was added was to troll javascript programmers, who read it as "not important".
I don't do any frontend development other than sometimes tweaking custom stylesheets for sites for use with the Stylish extension. I use `!important` all the time when doing this; a surprising number of sites I try to modify end up having some stuff with in-line CSS on HTML attributes, and that's the easiest way to override it. I don't pretend to think this is an intended use case of `!important`, but I think being able to customize the way sites look in ways that I personally prefer is at least in the spirit of the open web.
Seriously tho, it comes down to dollars and cents and the fact that !important is an option (and not just for font-size).
A client says they’ll pay for 30 minutes, the boss won’t let you go over 15, it’s not like there’s enough time to actually wiggle your way through a CRM to drop the proper CSS, so a little !important in the override inline CSS is what happens time and time again.
Good developers would love to take the time to do things right, but we don’t always have control over these situations and it stinks.
A client says they’ll pay for 30 minutes, the boss won’t let you go over 15, it’s not like there’s enough time to actually wiggle your way through a CRM to drop the proper CSS, so a little !important in the override inline CSS is what happens time and time again.
Good developers would love to take the time to do things right, but we don’t always have control over these situations and it stinks.
Damn, there are still people believing that you can just express what the intent behind an engineering tool was, and people will only ever use it if it matches that intent?
That would be crazy naive and I hope this person doesn't imply that.
Everybody is on a schedule. People reach for whatever is available. Doesn't matter what was the reason `!important` was added, at all. If it solves a real problem -- especially quickly -- then people will use and abuse it.
That would be crazy naive and I hope this person doesn't imply that.
Everybody is on a schedule. People reach for whatever is available. Doesn't matter what was the reason `!important` was added, at all. If it solves a real problem -- especially quickly -- then people will use and abuse it.
CSS !Important is a nice fail safe or safety valve for emergencies. It is good design to have safety valves in a system. Sure, you should not be encouraged to use it under normal circumstances. As with other fail safe features, it is meant for extreme scenarios you can sometimes predict, but more importantly for reasons you CANNOT predict. So this tweet arguing that it is meant for one reason is invalidating why it is good design.
The main thing that bugs me about "!important" is...
Why isn't it "important!" ?!?
What kind of twisted soul decided to put the exclamation mark at the beginning?
Why isn't it "important!" ?!?
What kind of twisted soul decided to put the exclamation mark at the beginning?
If a simple condition like this requires some special solution, isn't that a sign that there are probably some a fundamental issues with your system?