CSS on my blog reduced from 5875 lines to 233 lines. vitalik.eth.limo/css/main.css Today is a great day for simplification. All software (incl law) should do this more.
OpenGraph image
vitalik.eth.limo
‎ avatar
Do you have any rules for simplification?
2
Jason Crawford avatar
Nice. BTW, not sure how you're generating your HTML, but you have some spurious anchor tags in your text:
Cast image embed
Darryl Yeo 🛠️ avatar
Love to see it! You can do even better though – use `light-dark()` to define both light and dark variants of each CSS color variable at once, then have your JavaScript toggle set `color-scheme` to `dark` or `light` on the `<html>` element.
light-dark() - CSS: Cascading Style Sheets | MDN
developer.mozilla.org
light-dark() - CSS: Cascading Style Sheets | MDN
color-scheme - CSS: Cascading Style Sheets | MDN
developer.mozilla.org
color-scheme - CSS: Cascading Style Sheets | MDN
1
6
Darryl Yeo 🛠️ avatar
Also, nested CSS rules are natively supported now in all major browsers, so any long repetitive parent IDs or class names (`.markdown-body`, `#color-mode-switch`, etc) can be pared down to one instance each.
Using CSS nesting - CSS: Cascading Style Sheets | MDN
developer.mozilla.org
Using CSS nesting - CSS: Cascading Style Sheets | MDN
1
2
Rafi avatar
Oh nice. Didn’t know it’s already widely supported
1
Brian Ethier avatar
My favorite PRs are all red.
1
Ass Face ‍💨🪂 (Ø,G) avatar
Clean CSS >>>> chadcn >> tailwind
Goldie 🧟‍♂️ avatar
impressive
Lee avatar
Life hack
Konyangi avatar
Why light-dark mode switch doesn't work? :c
The ChainStories Podcast avatar
Simplification always leads to better efficiency. This should be the standard in software and even law. Less is more!
Noted Debug avatar
Good one
max avatar
is there a visual comparison
1
Darryl Yeo 🛠️ avatar
I assume this is a pure refactor and there would be no visual difference?
1
max avatar
that was a real wasteful css then haha
NFT_Drew avatar
Interesting