関わっているプロジェクトでTailwindを導入するか悩んでいる
というのも以前Pixivのデザインシステムで、複数のサービス間のスタイルを強制するのにTailwindが最適だったという記事を読んだことがあり、同じような状況なため導入を検討している
ただ、Tailwindを使ったことがなかったので、いまさらながら思想を調べてみた
思想はTailwind制作者のAdam Wathan が自身のブログで語っていた adamwathan.me
記事を読んで、制作するにいたった思考のプロセスにとても共感したので、かいつまんで書いておこうと思う
まず、以下のような書き方はHTML側にスタイリングの情報が出てしまっているため、「関心の分離」上よくないとされてきた
<p class="text-center"> Hello there! </p>
なので、以下のように対応するコンテンツ名をつけ、構造とスタイリングを別で管理するようにする
<style> .greeting { text-align: center; } </style> <p class="greeting"> Hello there! </p>
ただし、以下のように対応するコンテンツの最上位の要素だけにclassをつけて管理した場合、結局スタイリング側にHTMLの構造が出てきてしまい、「関心の分離」ができていないことになる
<style> .author-bio { background-color: white; border: 1px solid hsl(0,0%,85%); border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow: hidden; > img { display: block; width: 100%; height: auto; } > div { padding: 1rem; > h2 { font-size: 1.25rem; color: rgba(0,0,0,0.8); } > p { font-size: 1rem; color: rgba(0,0,0,0.75); line-height: 1.5; } } } </style> <div class="author-bio"> <img src="https://cdn-images-1.medium.com/max/1600/0*o3c1g40EXj65Fq9k." alt=""> <div> <h2>Adam Wathan</h2> <p> Adam is a rad dude who likes TDD, Active Record, and garlic bread with cheese. He also hosts a decent podcast and has never had a really great haircut. </p> </div> </div>
そこで、セレクタの詳細度を低く保ち、CSSを特定のDOM構造に依存させないBEMのような手法が使われるようになった
<div class="article-preview"> <img class="article-preview__image" src="https://i.vimeocdn.com/video/585037904_1280x720.webp" alt=""> <div class="article-preview__content"> <h2 class="article-preview__title">Stubbing Eloquent Relations for Faster Tests</h2> <p class="article-preview__body"> In this quick blog post and screencast, I share a trick I use to speed up tests that use Eloquent relationships but don't really depend on database functionality. </p> </div> </div>
ただ、ページが増えてくると似たようなコンポーネントを作りたいときや、再利用できるような単位で分割しておこうとするときに複雑さやコンポーネント名を考える手間が格段に増える
そこで、作者はユーティリティファーストCSSの考えに至ったとのこと
コンポーネント名を考えるのは本当に手間になってきたと感じていて、人によってバラバラだし、なんでそういう名前にしたのか議論するのが面倒と感じていたのでとても共感した
ユーティリティファーストCSSのメリット
ユーティリティファーストCSSは以下のようにスタイリングを全て、ユーティリティクラスで表現する
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4"> <div class="flex-shrink-0"> <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo"> </div> <div> <div class="text-xl font-medium text-black">ChitChat</div> <p class="text-gray-500">You have a new message!</p> </div> </div>
これによるメリットは以下
ただし、これはReactやVueなどのコンポーネント分割しているときに発揮するので注意が必要そう
おそらく、一枚のHTMLで使おうとすると、コンポーネントの境目がわからなくなるので別のデメリットが浮き彫りになってしまう
私の場合、基本的にReactやVueを使う想定なので、問題ないしスタイリングを強制することは魅力的
デメリット
デメリットは以下が考えられる
- 最初に強制したいスタイルを決めておかなければならない
- Tailwindの書き方を覚えなければならない
- メンバーに思想を伝えなくてはならない
結論、今回はデメリットを考えると今は時間がないため、最初に強制したいスタイルを決めておくことが困難だし、メンバーに伝える余裕もないため導入を見送るかも知れない
ただ、思想は良いと思うのでいつか試してみたい
