CSSのユーティリティクラスと「関心の分離」——いかにしてユーティリティファーストにたどり着いたか（翻訳） - yuhei blog

Tailwind CSS作者のAdam Wathan氏による「CSS Utility Classes and "Separation of Concerns"」の日本語訳です。翻訳に当たって原著者の許諾を得ています。 2021年10月29日に全文再翻訳しました。 この数年の間で、私のCSSの書き方は、非常に「セマンティック」なアプローチから「ファクショナルCSS」と呼ばれるものに変わりました。 この書き方でCSSを書くと、多くの開発者からかなりの反感を買うことがあります。そのため、私がいかにしてここまでたどり着いたかを説明することで、その過程で得た教訓や洞察について共有したいと思います。 第1段階 「セマンティック」なCSS よいCSSのためのベストプラクティスとして、耳にするであろうことのひとつは「関心の分離」です。 考え方としては、HTMLにはコンテンツについての知識のみを含めるべきで

[umai_bow]

うーん

[yarumato]

“文書とレイアウト分離すべし、は論点のすり替え。分離はいいに決まってる。問題は依存関係の方向。1) HTMLに依存するCSS（CSSは再利用不可）　2)CSSに依存するHTML（HTMLは再利用不可、Bootstrap）　3)ユーティリティを合成”

[sigwyg]

“いつの間にか402個のユニークなテキスト色がスタイルシートの中に入っていることになります。” あるある過ぎて辛い

[lanius]

ユーティリティファースト。

[field_combat]

ユーティリティファースト。繰り返されるパターンが出てきたらMixin

[daruyanagi]

わいでも依存の方向の話ぐらいまでなら意識できそう。とりあえず双方向にならないようにしよう……あとはおいおいお勉強かな

[zetta1985]

“新しく書かれるCSSのすべてが複雑性の元凶”

[ngyuki]

Tailwind CSS

[kikuchi1201]

Tailwind CSS 気になってる

[uzulla]

なるほど

[Tomato-360]

なるほど。ユーティリティファーストか。

[lalupin4]

関心事の分離

[renowan]

デザインシステムがしっかりできているプロジェクトはユーティリティクラスは有効だよ。業務システムなんか一々cssを書く暇がない

[baronhorse]

本末転倒な感じ

[peller]

一周まわってbootstrap のutilみたいな？ちょっと納得出来なかったな

[tofu-kun]

感覚はわかるが

[knjname]

素晴らしい記事と翻訳

[ytRino]

androidでいうとdimens使いつつまとまったらstyleにするみたいなことかな

[jislotz]

音楽でたとえるなら、無限個の周波数から12音階ができる過渡期みたいな感じ。

[ko-ya-ma]

Tailwind.css作者の考え方