Inline StyleであるTailwind CSSの利点は脳のコスパ↑

はじめに

Tailwind CSSに関する技術の難しい話はしないです.できないです.

しかし,ある程度は一般の人の思考のメカニズムや脳処理の工程は理解しているつもりです.

なので今回は,単にclassをつけてCSSファイルを別に作成しスタイリングする方法はどうも凡人の脳の処理能力では困難なのではなかろうかという話です.

決してTailwind CSSを推奨するためのものではございません.

まずは実装例から

以下の3つの例を参考にお話をします.

①）通常のHTML/CSSで

.html

<div class="section__discription">
  <p class="section__discription__item">がっはっは</p>
</div>

.css

.section__discription {
  position: relative;
}
.section__discription .section__discription__item {
  color: red;
}

②）Inline Styleで

.html

<div style="position: relative;">
  <p style="color: red;">がっはっは</p>
</div>

③）Tailwind CSSで

.html

<div class="relative">
  <p class="text-red-500">がっはっは</p>
</div>

ちなみに,一般的なスタイリングと言われるUIを作成する作業において

特定のHTML要素におけるCSSプロパティが何か

あるいは,その逆である各CSSプロパティはどの要素に当たっているか

を考える.必要があるものとします.（今回は前者と仮定して考察を進めます）

加えてその親と子にどんな要素があり,それらのCSSは何なのかを把握する必要があります.

各実装例の考察

①の場合

.htmlにて要素のclass属性を確認

↓（この感にワーキングメモリ（別名：作業記憶）を使用）

.cssにて先に確認したclass属性を探す

↓（この感にワーキングメモry

再び.htmlに戻り,親や子のclass属性を確認

↓（この感にワry

再び.cssにて先に確認したclass属性を探す

↓（こry

更にclass名は複数であることもしばしばであることも考慮するともう虚無になるsikanai.

要するに2つのファイルの目視を（たとえ2つが横に並んでいたとしても）交互にしなければいけなくなる.

初学者はHTML/CSSから入るのが王道らしいが,初見殺しも甚だしい.

ちなみにワーキングメモリ（別名：作業記憶）とは,今まさにこの記事を読んでいるあなたが使用している「①の場合ってのはさっきのあのコードのことだから…」みたいなその時しか覚えてなくて良い記憶のことです.

②の場合（Inline Styleの場合なので一応③も含む）

.htmlにて要素のstyle属性を確認

↓（この感にワーキングメモリを使用するがすぐ近くにカンペがある状態）

同じファイル内の,おそらくその近くにあるであろう親や子のstyle属性を確認

名前空間がやっていること

名前空間というのは,class名をつけることで現れるその名前の追加カテゴリのようなものです.（別にそんな難しく考えなくて良い）

こんなかっこいい名前がついている名前空間と言われるものですが,昔は②の書き方ではできないことがあったり,可読性が低かったりという理由（後述）があり,.htmlと.cssを分ける必要があったため.それらを結ぶ名前が必要だったので①のような方法をとっていたのかと思います.

①の思考過程を整理すると,

特定のHTML要素 → class名（名前空間）→ そのclass名におけるCSSプロパティ達

このような感じになります.

それに比べて②では

特定のHTML要素 → そのHTML要素におけるCSSプロパティ達

となると言えるでしょう.

これだけを見た場合ですが,Inline Styleが優勢なのは明らかなのではないでしょうか.

②と③は同じ？

前述したとおり②はすべてのCSSの文法が使えるわけではないのに加えて,CSSプロパティが増えるにつれて可読性が壊滅的になるといえるでしょう.

.section__discription__item:before { /* 疑似要素できない */
  color: red;
}

<p style="color: red; background-color: blue; padding-top: 20px;">がっはっは</p>
<-- CSSプロパティが増えるほど可読性が壊滅的 -->

これを解決するのがTailwind CSSを含むInline Styleを実現するCSSフレームワークだと考えます.

③の場合

参考までに私の書いたTailwind CSSをエアプできる記事を貼っておきます.

https://zenn.dev/nbr41to/articles/276f40041ad9fe

思考過程は前述の②の場合と同じですが,Tailwind CSS独自が取り決めたCSSプロパティに紐づくclassをある程度記憶（少なくとも把握）してないといけません.（それがどんなものかは上の記事をご覧ください.）

なので,

特定のHTML要素 → そのHTML要素におけるTailwind CSS独自が取り決めたclassを確認 → そのclassをCSSプロパティに変換

となります.

ここで重要なのは,最後の「classをCSSプロパティに変換」の工程はワーキングメモリではなく,短期記憶や長期記憶と言われる分類の記憶能力を使用しているということです.

これは作業記憶（ワーキングメモリ）と違って,何かをちょっとの間覚えていないといけない苦しみから開放してくれます.

それでも初学者はTailwind CSSから学び始めてはいけない

先程に「初見殺しも甚だしい」という表現を使いましたが,だからといってTailwind CSSを初学の頃から使うことに私は反対です.

あくまでもマークアップ言語としてのHTML/CSSをある程度後にTailwind CSSという選択肢があるという考え方が正しいからです.

いきなり,Tailwind CSSを使用することは未成年が飲酒や喫煙をすることに似ています.（無論,未成年にはこんな伝え方では伝わらないというジレンマもありますが）

結論

脳に優しいInline Styleを使ったほうが良いかと言われると悩みます.

これは何も考えなくなる人が量産され,結果的に難しいことを考えることができる人が少なくなってしまうことをどう捉えるかという話につながるからです.

さらに,ワーキングメモリは実はかなり重要な能力であり,使用した方が幸福度が上がったり,老化予防になったりします.

それでもやはり人間は楽に流されてしまうのが性であるので,私がTailwind CSS中毒になっていることは否定しません.

おまけ

結局classが長いと可読性下がるんじゃね？という人への解決策

jsでclassを管理できる環境（Reactとか）の場合は,clsxやclassnamesといったライブラリを使用することで,classを配列で記述できるようになります.

例）

<button
  className={clsx(
    'rounded-xl bg-teal-500 py-4 px-6 text-xl font-bold text-white shadow',
    'border-4 border-teal-600',
    'hover:shadow-inner hover:brightness-90',
    otherClass,
 )}
>
  {children}
</button>

分類の境界線や見やすさに個人差が出てしまうかもしれませんが,classを動的にすることもできるので,結構おすすめです.