🤪

Tailwind CSSと自前のCSSを混在させたら地獄を見た話

2021/02/02に公開

Scss

Tailwind CSS

tech

はじめに

こんにちは。フロントエンドを軸にエンジニアをしています、いしまるといいます。

最近よく耳にするようになりました、ユーティリティクラスをたくさん用意してくれている「Tailwind CSS（以下、tailwind）」。
このユーティリティファーストのフレームワークの登場によって開発が非常にしやすくなりました。

しかし「CSS設計をしなくてもよくなるよ」とごく稀に聞くのですがそれは本当でしょうか。。。。。。
（私が文脈を吹き飛ばしただけかも）
確かに命名に頭を悩ませるといったところはあると思うのですが、ある程度ルール化は必要です。

この記事では「tailwindを使ったらCSS設計しなくてもよくなるというわけではない」ということが伝わると幸いです😇
CSS設計だいじ、だな、、、（個人の意見）

※CSS設計や、手法についてはこの記事において言及しません。

見た地獄その1: 当たっているセレクタの呼び出し元が分かりづらい

tailwindを使うにあたって、「どういったルールでtailwindを使うのか」を定義しないまま、見切り発車でコーディングしたところ、
ある場所はテンプレート側にtailwindのクラスが当たっていたり、
あり場所は自前のスタイルが当たっていたり、
ある場所はtailwindのクラスが当たっているかと思いきや自前で書いたCSSが当てられていたり......等結構カオスになりました。

上記の問題はデバック時にもどこのスタイルを修正すべきなのか混乱を生みます。

※paddingがtailwindのclassで付けられているが他は自前

<template>
  <button class="c-button px-6 py-2 text-white">Button</button>
</template>

----略----

<style lang="scss" scoped>
.c-button {
  background: #1D4Ed8;
  border-radius: 8px;
  line-height: 1.5;
  @apply font-bold;
}
</style>

@applyで記述している場所もあれば、tailwindのクラスを付けているところもあれば、自前のcssを使っている箇所もあるという結構カオスな感じですね。

反省点

以下のように「tailwindを使うセレクタはこれ」とか、「コンポーネント側はclass名を付与した上で、セレクタは@apply構文にまとめること」とか、きちんとルール化しておけばよかったと思います。

コンポーネント名をファイル名に任せてtailwindのみでclassをつけたパターン

// CButton.vue

<template>
  <button class="mr-5 bg-blue-700 text-white border border-blue-700 font-bold py-2 px-6 rounded-lg">
  Button
  </button>
</template>

----略----
<style lang="scss" scoped>
</style>

class名は自前でつけて、全て@apply構文にまとめたパターン

// CButton.vue

<template>
  <button class="c-button">Button</button>
</template>

----略----
<style lang="scss" scoped>
.c-button {
  @apply mr-5 bg-blue-700 text-white border border-blue-700 font-bold py-2 px-6 rounded-lg;
}
</style>

他にもいくつか方法はあると思いますが、きちんと設計しましょう、、、

見た地獄その2: デザイン変更時、HTML側への変更が地獄だった

tailwindはユーティリティファーストの思想があるので、class名の命名に悩む時間が減ります！
が、上記の例のようにHTMLに記述するclassの量が多いです。

ゆえに、デザイン変更があった場合にHTML側への変更が多くなってしまいます。
例えば、以下ではmargin-right: 20pxがつく.mr-5が定義されていますが、
「やっぱり12pxに変更お願いします」となった場合に、.mr-5を全て.mr-3に変更する必要があります。
また、.mr-5は他の箇所でも使われているかもしれないので、安易に一括置換をするとまたややこしくなります。

  <button class="mr-5 bg-blue-700 text-white border border-blue-700 font-bold py-2 px-6 rounded-lg">
  Button
  </button>
    <button class="mr-5 bg-blue-700 text-white border border-blue-700 font-bold py-2 px-6 rounded-lg">
  Button
  </button>
    <button class="mr-5 bg-blue-700 text-white border border-blue-700 font-bold py-2 px-6 rounded-lg">
  Button
  </button>

上記は、ボタンのみの例ですが、これが結構大きなテンプレートだったときにはもう影響範囲は大きいし地獄です。

反省点

上記の対処法として、繰り返しにはなるのですが各コンポーネントにクラス名をつけておいて@applyにまとめてあげることと、
デザイン全体を見て、共通部分はテンプレート化しておくべきだったと反省してます。

次からテンプレート化しておこうね〜〜〜わたし〜〜〜〜〜

おわりに

平たく言うと「ルール化をしっかりしておかないとカオスになります」というお話でした。

tailwind自体はすごく便利ですし、素敵なフレームワークです。
これまでなかった、ユーティリティファーストといった思想で、目指すところが「整理するとか共通化するのが後回しにできる」という点もすごくいいなと思います。
上記の思想により、共通化しておくべきなのか、それともここでしか使わないコンポーネントとして定義をしておくべきなのか......等毎回コンポーネントの命名に頭を悩ませる時間を少し減らせるのかなと思います。

この記事ではTailwind CSSを否定しているわけではなく、使うとしても結局CSS設計やルール化はある程度しなければ、ぐちゃぐちゃになってカオスになって後々の運用がとてもつらいことになるということが伝われば幸いです。

私自身が至らない点も多数あるかと思いますが、現状の自分が「こう思う」を記しました。
tailwindとめちゃくちゃ仲良くなれれば、こんな地獄を見ることはなかったんだろうなぁと思います。

以上！

はじめに

見た地獄その1: 当たっているセレクタの呼び出し元が分かりづらい

反省点

見た地獄その2: デザイン変更時、HTML側への変更が地獄だった

反省点

おわりに

Discussion