The results are in for the 2023 State of #CSS survey, and among many surprising (and some not so surprising) takeaways is that the honor of winning the “Highest Retention” award went to… #OpenProps 🎉

Congratulations! (And if you don't yet know what Open Props is, you don't know what you're missing! It's a super rad way to #WebDev your own design system using vanilla CSS variables)

https://thathtml.blog/2023/08/open-props-wins-2023-state-of-css-survey/

I have this side project I’m working on where one of the goals was to write vanilla #css instead of using any library or post-processor. #openprops by @argyleink was the only thing I needed and I was happy. UNTIL(dun dun duuu), I need a class to only position: relative. It annoyed me so much so I thought “let’s get #unocss by @antfu in to on-demand me those util classes”. One thing led to another and I’ve converted my whole project to UnoCSS and I don’t know what to feel 😂

I do enjoy writing vanilla CSS more but man, those handy UnoCSS util classes and the possibility to “foolproof” your setup in a way CSS custom props can’t makes it hard to go vanilla CSS.

サンプルコードが特になんの注釈もなく #OpenProps #CSS 読み込んでる前提なのは、記事書いてる人がそもそもその作者だから :tony_laughing:

Adapting typography to user preferences with CSS

https://web.dev/adapting-typography-to-user-preferences-with-css/

#OpenProps の #Figma #Variables とかそのうち整備されそう（そしたら作り方の参考にしたい

#OpenProps でも採用されてる、あるスタイル内にスコープが閉じたローカル #CSS 変数を --_foo って命名するやつ、もう結構メジャーなあれなのかな？（これ真似していく

CSS Pattern: Fancy backgrounds with CSS gradients https://css-pattern.com/

今、個人的に推してる #OpenProps っていう #CSS 変数をデザイントークンとして整備したライブラリの作者であり、#VisBug っていう Chrome 拡張の作者でもある Adam Argyle さんが front-end.social にいた！早速フォロー！:tony_wee:
（もはやファン

#OpenProps をがっつり導入すると決めてから意外とまだ細いところ触り切れてない。

#CSS #WebDev

https://open-props.style/