[css-!] Abbreviated form of !important, to simply !

[mangelozzi]

When working with CSS utility frameworks, they tend to have all their rules ending with !important.
A significant chunk of the generated output is just !important.

What if ! had the same meaning as !important so that these two lines did the same thing:

.foo{color:red!important}
.foo{color:red!}

I can't see any tokenizing issues with this proposal, but others may explain why its not possible. I suspect people will say it will be gzipped away when sent from the server to the client, however it might be unneccessary verbosity for developers writing/diff'ing sourcecode. It is a feature I would really appreciate, and maybe others would to.

PS: Here's what it looks like next to an exclamation mark:

.foo{color:red!;background:blue!}

[romainmenke]

Which utility frameworks do this, and should they do this?

[mangelozzi]

Which utility frameworks do this, and should they do this?

Maybe you are not familiar with Utility first (not only, but first) CSS.
Checkout this article: https://frontstuff.io/in-defense-of-utility-first-css
So yes, they should be doing this.

Using the CSS cascade is fine for document type webpages or small sites, less so for large app like websites.

The question is not which utility first don't use it, but which don't. How about the website you are browsing right now, github.com use !important utility selectors, I opened up the source:

https://github.githubassets.com/assets/primer-665d09058d18.css

.border-y{border-top:1px solid var(--color-border-default) !important;border-bottom:1px solid var(--color-border-default) !important}.border{border:1px solid var(--color-border-default) !important}.border-0{border:0 !important}.border-top{border-top:1px solid var(--color-border-default) !important}.border-right{border-right:1px solid var(--color-border-default) !important}.border-bottom{border-bottom:1px solid var(--color-border-default) !important}.border-left{border-left:1px solid var(--color-border-default) !important}.border-top-0{border-top:0 !important}.border-right-0{border-right:0 !important}.border-bottom-0{border-bottom:0 !important}.border-left-0{border-left:0 !important}.rounded{border-radius:6px !important}.rounded-0{border-radius:0 !important}.rounded-1{border-radius:4px !important}.rounded-2{border-radius:6px !important}.rounded-3{border-radius:8px !important}.rounded-top-0{border-top-left-radius:0 !important;border-top-right-radius:0 !important}.rounded-top-1{border-top-left-radius:4px !important;border-top-right-radius:4px !important}.rounded-top-2{border-top-left-radius:6px !important;border-top-right-radius:6px !important}.rounded-top-3{border-top-left-radius:8px !important;border-top-right-radius:8px !important}.rounded-right-0{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.rounded-right-1{border-top-right-radius:4px !important;border-bottom-right-radius:4px !important}.rounded-right-2{border-top-right-radius:6px !important;border-bottom-right-radius:6px !important}.rounded-right-3{border-top-right-radius:8px !important;border-bottom-right-radius:8px !important}.rounded-bottom-0{border-bottom-right-radius:0 !important;border-bottom-left-radius:0 !important}.rounded-bottom-1{border-bottom-right-radius:4px !important;border-bottom-left-radius:4px !important}.rounded-bottom-2{border-bottom-right-radius:6px !important;border-bottom-left-radius:6px !important}.rounded-bottom-3{border-bottom-right-radius:8px !important;border-bottom-left-radius:8px !important}.rounded-left-0{border-bottom-left-radius:0 !important;border-top-left-radius:0 !important}.rounded-left-1{border-bottom-left-radius:4px !important;border-top-left-radius:4px !important}.rounded-left-2{border-bottom-left-radius:6px !important;border-top-left-radius:6px !important}.rounded-left-3{border-bottom-left-radius:8px !important;border-top-left-radius:8px !important}@media(min-width: 544px){.border-sm{border:1px solid var(--color-border-default) !important}.border-sm-0{border:0 !important}.border-sm-top{border-top:1px solid var(--color-border-default) !important}.border-sm-right{border-right:1px solid var(--color-border-default) !important}.border-sm-bottom{border-bottom:1px solid var(--color-border-default) !important}.border-sm-left{border-left:1px solid var(--color-border-default) !important}.border-sm-top-0{border-top:0 !important}.border-sm-right-0{border-right:0 !important}.border-sm-bottom-0{border-bottom:0 !important}.border-sm-left-0{border-left:0 !important}.rounded-sm{border-radius:6px !important}.rounded-sm-0{border-radius:0 !important}.rounded-sm-1{border-radius:4px !important}.rounded-sm-2{border-radius:6px !important}.rounded-sm-3{border-radius:8px !important}.rounded-sm-top-0{border-top-left-radius:0 !important;border-top-right-radius:0 !important}.rounded-sm-top-1{border-top-left-radius:4px !important;border-top-right-radius:4px !important}.rounded-sm-top-2{border-top-left-radius:6px !important;border-top-right-radius:6px !important}.rounded-sm-top-3{border-top-left-radius:8px !important;border-top-right-radius:8px !important}.rounded-sm-right-0{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.rounded-sm-right-1{border-top-right-radius:4px !important;border-bottom-right-radius:4px !important}.rounded-sm-right-2{border-top-right-radius:6px !important;border-bottom-right-radius:6px !important}.rounded-sm-right-3{border-top-right-radius:8px !important;border-bottom-right-radius:8px !important}.rounded-sm-bottom-0{border-bottom-right-radius:0 !important;border-bottom-left-radius:0 !important}.rounded-sm-bottom-1{border-bottom-right-radius:4px !important;border-bottom-left-radius:4px !important}.rounded-sm-bottom-2{border-bottom-right-radius:6px !important;border-bottom-left-radius:6px !important}.rounded-sm-bottom-3{border-bottom-right-radius:8px !important;border-bottom-left-radius:8px !important}.rounded-sm-left-0{border-bottom-left-radius:0 !important;border-top-left-radius:0 !important}.rounded-sm-left-1{border-bottom-left-radius:4px !important;border-top-left-radius:4px !important}.rounded-sm-left-2{border-bottom-left-radius:6px !important;border-top-left-radius:6px !important}.rounded-sm-left-3{border-bottom-left-radius:8px !important;border-top-left-radius:8px !important}}@media(min-width: 768px){.border-md{border:1px solid var(--color-border-default) !important}.border-md-0{border:0 !important}.border-md-top{border-top:1px solid var(--color-border-default) !important}.border-md-right{border-right:1px solid var(--color-border-default) !important}.border-md-bottom{border-bottom:1px solid var(--color-border-default) !important}.border-md-left{border-left:1px solid var(--color-border-default) !important}.border-md-top-0{border-top:0 !important}.border-md-right-0{border-right:0 !important}.border-md-bottom-0{border-bottom:0 !important}.border-md-left-0{border-left:0 !important}.rounded-md{border-radius:6px !important}.rounded-md-0{border-radius:0 !important}.rounded-md-1{border-radius:4px !important}.rounded-md-2{border-radius:6px !important}.rounded-md-3{border-radius:8px !important}.rounded-md-top-0{border-top-left-radius:0 !important;border-top-right-radius:0 !important}.rounded-md-top-1{border-top-left-radius:4px !important;border-top-right-radius:4px !important}.rounded-md-top-2{border-top-left-radius:6px !important;border-top-right-radius:6px !important}.rounded-md-top-3{border-top-left-radius:8px !important;border-top-right-radius:8px !important}.rounded-md-right-0{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.rounded-md-right-1{border-top-right-radius:4px !important;border-bottom-right-radius:4px !important}.rounded-md-right-2{border-top-right-radius:6px !important;border-bottom-right-radius:6px !important}.rounded-md-right-3{border-top-right-radius:8px !important;border-bottom-right-radius:8px !important}.rounded-md-bottom-0{border-bottom-right-radius:0 !important;border-bottom-left-radius:0 !important}.rounded-md-bottom-1{border-bottom-right-radius:4px !important;border-bottom-left-radius:4px !important}.rounded-md-bottom-2{border-bottom-right-radius:6px !important;border-bottom-left-radius:6px !important}.rounded-md-bottom-3{border-bottom-right-radius:8px !important;border-bottom-left-radius:8px !important}.rounded-md-left-0{border-bottom-left-radius:0 !important;border-top-left-radius:0 !important}.rounded-md-left-1{border-bottom-left-radius:4px !important;border-top-left-radius:4px !important}.rounded-md-left-2{border-bottom-left-radius:6px !important;border-top-left-radius:6px !important}.rounded-md-left-3{border-bottom-left-radius:8px !important;border-top-left-radius:8px !important}}@media(min-width: 1012px){.border-lg{border:1px solid var(--color-border-default) !important}.border-lg-0{border:0 !important}.border-lg-top{border-top:1px solid var(--color-border-default) !important}.border-lg-right{border-right:1px solid var(--color-border-default) !important}.border-lg-bottom{border-bottom:1px solid var(--color-border-default) !important}.border-lg-left{border-left:1px solid var(--color-border-default) !important}.border-lg-top-0{border-top:0 !important}.border-lg-right-0{border-right:0 !important}.border-lg-bottom-0{border-bottom:0 !important}.border-lg-left-0{border-left:0 !important}.rounded-lg{border-radius:6px !important}.rounded-lg-0{border-radius:0 !important}.rounded-lg-1{border-radius:4px !important}.rounded-lg-2{border-radius:6px !important}.rounded-lg-3{border-radius:8px !important}.rounded-lg-top-0{border-top-left-radius:0 !important;border-top-right-radius:0 !important}.rounded-lg-top-1{border-top-left-radius:4px !important;border-top-right-radius:4px !important}.rounded-lg-top-2{border-top-left-radius:6px !important;border-top-right-radius:6px !important}.rounded-lg-top-3{border-top-left-radius:8px !important;border-top-right-radius:8px !important}.rounded-lg-right-0{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.rounded-lg-right-1{border-top-right-radius:4px !important;border-bottom-right-radius:4px !important}.rounded-lg-right-2{border-top-right-radius:6px !important;border-bottom-right-radius:6px !important}

[romainmenke]

Maybe @layer would be more suitable or a preprocessor could transform ! into !important?

[chriskirknielsen]

It does reduce verbosity but perhaps too much? In some of your examples, given the lack of semi-colons, I feel it would be extremely easy to confuse ! for a ;.

At a glance, .foo{color:red!;background:blue!} and .foo{color:red;background:blue;} look very similar and might introduce confusion. Granted, if introduced, over time, authors would get used to it, but I am not sure a single ! would be the best way to make it easier.

Additionally, !important should be used sparingly and as such, should be very explicit and intentional, so having it be a "long" flag makes it stand out, which is a good thing. (though yes I have written !improtnant and other variations a million times…)

[mangelozzi]

Maybe @layer would be more suitable or a preprocessor could transform ! into !important?

Oh my world @layer is a game changer! I have never come across that before, brillant thank you!

For others if they don't know about it: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer