さて、 TailwindCSS です。
試したことがあったのですが、やっと良さが理解できたので、メモしていこうと思います。
その良さは、SPA で起きる CSS の問題が解決できる点だと思います。
どんなに頑張ってもCSSは脆い
どんなに頑張っても CSS は、理想通りにならないということです。
Global CSS は、命名規則などを使っても限界がある
Global CSS は、規模が大きくなると、どうやっても混沌とします。
名前が被ったり、!important されたり、想定していないネストがあれば壊れます。
命名規則で破壊しにくくすることができても、防ぐことはできません。
頑張りのわりには報われないのです。
Scoped CSS にも問題がある
Scoped CSS は、コンポーネント内に閉じ込めて、外に影響を与えないようにする方法です。
ネイティブな機能ではないので、コンパイルする必要があります。
class名に自動でプレフィックスが付くことで、重複しないようにできます。
有効だと思われていましたが、万能ではないです。
破壊を抑えることはできますが、意図しない継承を止めることはできません。
パフォーマンスの問題もあります。
普通のCSSであれば、ページが表示される前に読み込めます。
キャッシュがあれば表示が速くもなります。
Scoped CSS は、そうはいきません。
第3の選択、TailwindCSS
どれを選択しても、問題が消えません。
それであれば、class名の記述は増えるが、他の問題が良くなる TailwindCSS はありだと思いました。
class名は長くなるが、CSSを書かない
TailwindCSS は、class名にCSSのプロパティを記述していくスタイルです。
つまり、CSSファイルを作る必要がありません。
HTMLだけで完結します。
どこに書き、どこに置き、どうリンクさせるのか、考える必要はありません。
想定外の継承も起こりません。
TailwindCSS をCSSフレームワークと比較する
書いた分だけ出力される
まず、書いた分だけコンパイルされることです。
CSSフレームワークは、不使用なものを読み込まないことで軽量化します。
しかし、使っていないclassが存在する可能性があります。
TailwindCSS は、記述したclassを確認して出力するので無駄がありません。
デザインがない
Bootstrap などのようにベースデザインが存在しません。
CSSフレームワークだと思って導入すると腰砕けになります。
インラインスタイルとの違い
インラインスタイルは、キャッシュできませんし、擬似要素なども扱えません。
TailwindCSS では可能です。
デメリット
とにかく、class名が長くなることです。
TailwindCSS のUIコンポーネントを用意できる flowbite というサイトで見てみます。
<div class="p-4 mb-4 text-sm text-blue-700 bg-blue-100 rounded-lg dark:bg-blue-200 dark:text-blue-800" role="alert"> <span class="font-medium">Info alert!</span> Change a few things up and try submitting again. </div>
こんな感じになります。私も最初に見た時、使用する意味が分かりませんでした。
やってみると、意外と楽しくなってくるので不思議です。
まとめ
CSS は何かを得るためには何かを捨てないといけないです。
長いclass名を許容すると、命名規則や親子関係のスタイルの継承などから解放されます。
コメント