僕がCSSフレームワークを嫌うただ一つの理由

最近Tailwindとやらが流行っているようなので、試しに使ってから批判してやろうと思ってドキュメントを読んだところ、結局この一点だけで試す気になれず終わったため、代わりにこれを書きました。

ちなみにBulmaとbootstrapを使ったことがあります。

TL; DR

結論: 「HTMLは文書構造、CSSは体裁」という役割分担のもと、HTMLには可能な限りデザインに関する情報を記述したくない。

2000年代のコーディング

僕がはじめて"ホームページ"を作ったのは、15年ほど前のことでした。

その当時は、ちょうどCSSが普及しはじめた頃でした。
「これからはCSSでデザインを当てるのがイケてるホームページ制作だぜ」的な、CSS＝最新技術な雰囲気があった気がします。

CSSそのものの歴史はもっと古いみたいですが、主要ブラウザのIEがこの時期にCSSをサポートし始めたようです。

(思い出レベルのため、間違っていたらすみません)

当時僕は、最新技術であるCSSにまだ追いつけず、↓こんなHTMLを書いていました。

<div align="center">中央寄せにしたい要素</div>

<p>
  <font size="7">大きくしたい文字</font>
  <font color="red">赤くしたい文字</font>
</p>

CSSが普及する前は、上記のような、デザインをあてるためのタグや属性がありました。
それらは、CSSの普及とともに非推奨、廃止となりました。

なぜCSSが登場した？

当時の僕のCSSに対する理解は、「同じスタイルを何箇所にも書かないで済む」「スタイルを使い回せて便利」あたりでした。

もし今、CSSの存在意義について説明を求められたら、「HTMLは文書構造、CSSは体裁」という役割分担の実現を真っ先に挙げると思います。
「スタイルを使い回せる」といったメリットはその役割分担による恩恵の1つだと思います。

文書の構造と体裁を分離させるという理念を実現するために提唱されたスタイルシートの具体的な仕様の一つ。
― wikipedia

僕が意識するClass名

その思想に従い、僕はHTML内にデザイン的要素を極力書かないように意識しています。

例えば、メニューボタンを作るとして、クリックされた要素が赤くなる、とします。

そんなとき、↓のようなHTMLを僕は書きたくありません。

<ul class="menu">
  <li class="menu-item">Item1</li>
  <li class="menu-item">Item2</li>
  <li class="menu-item red">Item3</li>
</ul>

Item3はなぜ赤いんですか？「赤いから赤い」んですか？

いいえ、「クリックされているから赤い」んです。

だから、↓のように書きたいです。

<ul class="menu">
  <li class="menu-item">Item1</li>
  <li class="menu-item">Item2</li>
  <li class="menu-item clicked">Item3</li><!-- または active とか -->
</ul>

前者はHTML(class名)がデザインに踏み込んでいますが、後者は自分の状態を示しているに過ぎません。

clickedなアイテムを赤にするか、太字にするか、あるいは何もしないかはCSS＝デザイン側に任せたいです。

時代を逆行するCSSフレームワーク

CSSフレームワークによって、再びHTMLに体裁が書き込まれる時代に逆戻りしてしまいました。

<div class="grid grid-cols-1 sm:grid-cols-2 sm:px-8 sm:py-12 sm:gap-x-8 md:py-16">
  <div class="relative z-10 col-start-1 row-start-1 px-4 pt-40 pb-3 bg-gradient-to-t from-black sm:bg-none">
    <p class="text-sm font-medium text-white sm:mb-1 sm:text-gray-500">Entire house</p>
    <h2 class="text-xl font-semibold text-white sm:text-2xl sm:leading-7 sm:text-black md:text-3xl">Beach House in Collingwood</h2>
  </div>
  <div class="col-start-1 row-start-2 px-4 sm:pb-16">
    <div class="flex items-center text-sm font-medium my-5 sm:mt-2 sm:mb-4">
      <svg width="20" height="20" fill="currentColor" class="text-violet-600">
        <path d="M9.05 3.691c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.372 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.363-1.118l-2.8-2.034c-.784-.57-.381-1.81.587-1.81H7.03a1 1 0 00.95-.69L9.05 3.69z" />
      </svg>
      <div class="ml-1">
        <span class="text-black">4.94</span>
        <span class="sm:hidden md:inline">(128)</span>
      </div>
      <div class="text-base font-normal mx-2">·</div>
      <div>Collingwood, Ontario</div>
..

引用 https://tailwindcss.com/

class="menu-item red"すら嫌がる僕にとって、↑のようなHTMLは見たくもありません。

おわりに

実用面を主軸においた要不要の議論については、僕も一応意見は持っているものの、他のTailwind否定派の記事が僕の言いたいことを十分に言ってくれているので、「HTMLがキモいから使いたくない」ってことだけ主張してみました。

CSSフレームワークファンの皆さん、ごめんなさい。