2023/1 Tailwind CSSの感想
最近ちょっと触っているmrsekut.icon
使い始めて2週間ぐらい
比較できる対象は、styled-components、MUI、CSS、SCSSあたり
記述量が少なく、気軽にかける
同等の目的を達成できるなら簡単に出来るべき
簡素な名前が用意されている
e.g. flex
styled-componentsのようにわざわざComponentを定義しなくて良い
わざわざclassを考えて、.cssに移動して、という手順を踏まなくて良い
ここが一番大きくわかりやすいポイントだと思うmrsekut.icon
学習コストがある
用意されているutility classを覚えるのが面倒
たびたびググる
慣れてくると勘で当てられるようになってくる
可読性の問題
慣れてないと、その指定の中身が何かわからない
適切なStylingができてたら、可読性はそこまで落ちない気がする
だが、疑似要素とかmediaqueryとかやりだすとやはりごちゃごちゃする
ただ、これは素のCSSと比べて劣っているかというと微妙
tailwindの(defaultの)classと、CSSのproperty:value;は基本的に一対一対応している
Tailwind自体に本質的な問題があるとは考えられない
そもそも素のCSS自体の可読性が悪い
命名が必要ないのは書き手は楽だが、読み手はしんどい
class名を付けることで意図を伝えやすくなる
他にも、ReactなどComponent自体の命名で意図を表現できる
HTML上がごちゃごちゃするのはそれはそう
これは一長一短
ごちゃごちゃすることの何が問題なのかを問わないといけない
書き手と読み手のメンタルモデルが共有されていないとしんどそう
これは、Tailwind CSSに限らない
例えば、「Component間のmarginはどう指定すべきか」のようなもの
わけわからんTailwindを書く人は、CSSを使ってもわけわからん書き方をする
Bootstrapじゃないので、そこに差はまったくない
殆どの場合、動かしてdev tool開いて確認しないと無理そう
実装する時も要素に適当な色を付けながら書いているので、あれをreview時もやらないとわからない
CSSはそもそも可読性の問題があるので、もう少し補助する仕組みが生まれても良さそう
必要なclassを用意しておいて、そのclassの付け外しだけでやっていく
これはstyled-comopnentsなどでやるのは難しい
最初からrem指定がデフォルトなのも良い
Design System
最初から使うべき値を制限できる
色が一番わかり易い
marginやwidthなど数値に対しての指定はかなり根拠がないと難しそう
しょっちゅう例外が生じていては意味がない
これはtailwindの問題ではなく、デザインシステムの本質的な難しさだと思う
ちゃんとやるなら、そもそもデザインカンプの時点で、そこの制限はかけておくべき
CSS書く段階でそれを適用するのは無理
型が効かない
VSCode拡張がないとまともに書けないmrsekut.icon
ミスっている指定は一番前にsortされるってだけだが
1,2,3,...12までは個別にあるのに、その次は14,16,20,..と続いていく
例えばミスってp-15と書けば何も効かない
https://gyazo.com/0351708c179e4f9a5cdfce68a80b3100
Componentがないと辛いというのはそうだと思う
これは簡単に改善できるだろう
Tailwind以前の問題という感じがする
ルールの重複がある場合を考えなくて良い
CSSではidやclassやtag名に対してstyleしていくので、重複が起きうる
詳細度の話とか、下に書いたほうが優先されるとか、色々あって複雑すぎる
code:css
<div class="blue">
<p id="blue" class="red">Color?</p>
</div>
.blue p {
color: blue;
}
p.red {
color: red;
}
color: blue;
}
jQueryと併用する時は、classとstyleが混ざってだるいとかならないのか
なると思う
が、jQuery書かないので無問題！
Tailwindを従来のCSSと複数比較している
長い
名前を付けなくて良くなる点を推し過ぎな気がするmrsekut.icon
可読性が落ちることについて言及がない
アンチTailwind
比較対象がWebComponents & CSS変数
一理あるとは思う
これはたしかに、どうなんだろう