最近Tailwind が人気だが「ユーティリティファースト」のアプローチはBootstrapよりも前からあった
それがだんだんと使われなくなったのはその手法に欠陥があったから
そのあたりを主張している記事を読んだ
具体的には、「Tailwindが解決する」と主張している以下の問題に対して、反論している
- You have to think up class names all the time
- You have to jump between multiple files to make changes
- Changing styles is scarier
- Your CSS bundle will be bigger
詳しくは記事を読んでもらったほうがよいが、例えばボタンにあてるスタイルはTailwindの場合は次にようになる
<button type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-expanded="false"> <span class="sr-only">Open main menu</span> <!-- Heroicon name: outline/menu --> <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" /> </svg> </button>
これはHTMLの肥大化を招いているし、CSSのカスケードを利用できてない、また、昨今のコンポーネント指向のUI開発であれば一意にしなければならないというグローバルでの命名を恐れる必要ないと主張している（BEMも批判の対象）
これらの主張は確かにそうだと思っていて、コンポーネント時代にあった命名が必要ではないかと感じている
一番わかるのは「コードは、書かれるよりも読まれることが多い」という主張で、あてたclassが「意味をもって」命名されていないと、どういうパーツなのかが全くわからないと思う
Tailwindの導入を踏みとどまらせる理由がまとまった記事だった
