ユーティリティファーストCSSのススメ〜なぜ、セマンティックなclass命名は失敗するのか？｜菱川拓郎

弊社では全ての新規サイトの構築で、CSSフレームワークをtailwindcssに切り替える意思決定を行い、実際に1年くらいが経過しました。「案件によって、tailwindが向いてそうなものは使う」ではなく「全ての案件で使用」です。使えば使うほどメリットの大きさを感じていますが、同時にtailwindcssの世界観が世間の常識とあまりにも違うため、社内のスタッフには少なからず戸惑いがまだ残っているように思います。 そこで、改めて「なぜtailwindcssを使うと効率的にサイトが構築でき、メンテナンス性が上がるのか」反対に「tailwindcssを使う上で、やってはいけないことは何か」についてまとめたいと思います。 tailwindcssとは tailwindcssとは、2020年11月にバージョン2.0がリリースされたばかりの、今注目のCSSフレームワークです。CSSフレームワークといえば

[ishiduca]

レイアウトの構造と要素の説明を表す構造は別物だから、レイアウトにセマンティックなCSSを合わせようとすること自体がナンセンスなんだろうと思っていた

[n2s]

新規全てでTailwindCSS採用とのこと / id:entry:4697733377644386850 のように他の技術との相性悪い場合があるようだけど果たして…？

[Cherenkov]

ユーティリティファーストは分かったけど、同時に共通パーツ化もしないと、結局全てのボタンのclass名を手動で変更することになるよね

[for-my-internet-demo]

基本全て横割りにして設計しない、みたいな方向はなんか最近の様子見てると割とここの人は好きそう

[kuracom]

めちゃんこclass指定付ける事にｳﾋｬｰってならなければ良さそう。今度機会があったら使ってみたい

[i5s4y]

Tailwindほんと最高です

[yarumato]

“TailwindCSS。かつてベストプラクティスと信じらたセマンティックなclass名はCSSを維持困難にする（影響先が不明確なので消せず追記）、命名が疲れる(長くするのは正解か？） インラインCSSは自由すぎる”

[sezemi]

“PurgeCSSと言うライブラリを使用することで、HTMLのなかで一度も使われていないCSSの記述はビルド時に削除” 知らんかった

[tsuki-rs]

素直にいらない。