tailwindを入れると「スタイルを指定するためだけにclassを振る必要がなくなる」という話

公開:2020/12/22
更新:2020/12/22
3 min読了の目安(約3400字TECH技術記事

短い雑記です

tailwindのメリットは色んな人が話していると思うのですが、最近感じた利点としてこれがあるなーというのをメモしておきます

例えばこんな感じの「ユーザーのカード」を考えてみましょう

もし普通に組むなら

<div class='user-card'>
  <div class='user-card__left'>
    <img src='/user/image.png' class='user-card__left__icon'>
  </div>
  <div class='user-card__right'>
    <div class='user-card__right__name'>
      sesere
    </div>
  </div>
</div>
.user-card{
  display: flex;
}
.user-card .user-card__left{
  width: 120px;
}
.user-card .user-card__left .user-card__left__icon{
  display:block;
  border-radius: 100%;
}
////以下略

と、こんな感じになると思います

これのデメリットとして挙げられるのは「class名が冗長である」「構造を変える度にそこより下のclass名も変更しないといけない」などでしょうか

コンポーネント

もしコンポーネント設計を組み込んでいる人であれば、これはこのように書いているかもしれません

<div class='user-card'>
  <div class='left'>
    <img src='/user/image.png' class='icon'>
  </div>
  <div class='right'>
    <div class='name'>
      sesere
    </div>
  </div>
</div>
.user-card{
  display: flex;
}
.user-card > .left{
  width: 120px;
}
.user-card > .left > .icon{
  display:block;
  border-radius: 100%;
}
////以下略

コンポーネント化している場合はデータ構造が変わることがありません。従って直下指定のセレクタ>を使うことで、一般的な単語を使いつつ、長くならないようにデザインが組めるわけです

これのメリットは「cssのバッティングが限りなく少なくなる」という点です

本来なら「left」や「right」と言った、一般的な名称はめちゃくちゃバッティングするのですが、このように直下指定でのみ使うことでバッティングを気にせずに書くことが出来ます

ただ、自分が気をつけていても「外部から導入したライブラリなどが.right .container .wrapなどにスタイルを振っている」という事はよくあるので、せっかくコンポーネント化するならこれをもう一歩すすめるべきです

さらにバッティングしにくいコンポーネント

<div class='user-card'>
  <div>
    <img src='/user/image.png'>
  </div>
  <div>
    <div>
      sesere
    </div>
  </div>
</div>
.user-card{
  display: flex;
}
.user-card > div:nth-of-type(1){
  width: 120px;
}
.user-card > div:nth-of-type(1) > img{
  display:block;
  border-radius: 100%;
}
////以下略

よく考えると上の「left」などのclass名は「人間が理解しやすいようにつけただけの名札」でしかありません

つまり極論を言えば必要がないものなので全部とっぱらいましょう

div:nth...などの形で指定するのは読み辛いです。目で置いながら「え〜っと……2個目の直下divだから……」などと解読するコストが必要になり生産性が落ちやすいです

しかし、他のライブラリなどの影響を受けずコンポーネントの中で使う限り全くバッティングしないので「理想」だけを言えばこれが理想的な形ではあります

これをtailwindで書けば

<div class='flex'> // もはや .user-cardの指定すらいらない
  <div class='w-30'>
    <img src='/user/image.png' class='block rounded-full'>
  </div>
  <div class='flex-1'>
    <div class='font-bold text-xl'>
      sesere
    </div>
  </div>
</div>

そう……なんとcssファイルがいらなくなったのです

命名によるバッティングも何も気にすることなく、別ファイルのcssとにらめっこする必要もないのです

これは直下の2個目のdivだから……などと変換する必要もないのです

開けばすぐに目で見て分かる安心感!!

.

という事で、tailwindは「解読コストを大きく下げる」というメリットがあり「バッティングを避けるためだけに付与するclassを取り除ける」というメリットがあるわけです

デメリット

tailwindはcssファイルを書かなくて良いかわりに、class指定がめっちゃ入るので転送量が若干(普通はgzipで圧縮されるので一切考えなくていいレベルです)増えるデメリットがあります

あとは、3つ4つなら良いのですが実務で使うとclass指定がこんな感じになります

<div class='flex items-center justify-center relative rounded-sm text-sm leading-4 pl-2 pr-3 pt-2 pb-1.5 mx-3 -mt-1 mb-2 border border-t border-b-2 border-x border-red-600 .....'>
  長い
</div>

見ての通りめちゃくちゃ長くなりますのでこれが何個もnestしてるとうんざりしてきます

ここらへんは適宜改行するとか、長いものは一旦rubyなどの変数に入れてから指定する〜などの対処が必要になります

<%= long_class = %w[
flex
items-center
justify-center
relative
rounded-sm
.....
].join(' ') %>

<div class="<%= long_class %>">短い!!!</div>

これもデメリットといえばデメリットですが、逆に言うと「これだけ色んなスタイルが指定されているとひと目で分かる」というメリットにもなりえると思いますので一長一短ですね