- From: mangelozzi via GitHub <sysbot+gh@w3.org>
- Date: Tue, 26 Jul 2022 19:04:03 +0000
- To: public-css-archive@w3.org
> 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}
```
--
GitHub Notification of comment by mangelozzi
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7538#issuecomment-1195870634 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 26 July 2022 19:04:05 UTC