⛵

TailwindCSSのおかげでCSS初心者を脱した話(N=1)

2022/10/02に公開

Tailwind CSS

idea

タイトルの通り、この記事では私個人の体験として「TailwindのおかげでCSS初心者を脱した」という話を書きます。ポエムです。

また、N＝1である上で誇張した言い方をすると、「CSS初心者がTailwindを使うと、ドラクエのはぐメタを狩るような経験値の荒稼ぎができて一気に初心者を脱する」ことが出来ます。

今の自分があるのはTailwindのおかげ、マジ神、一生ついていきます先輩。という感じです。

※Tailwindそのものについて考察するものではありません。あくまで一個人にこういうことがあったよという記事になります。
※ちなみに個人開発ではTailwind一択ですが、業務ではモダンJS環境じゃないのでBEMです。

初心者だった自分

flexboxって何？マージンとパディングの違いわからん。擬似クラスもう無理。
何もわからないし習得する気が起きないからよくあるUIフレームワーク探そう。
BootstrapだとありきたりになるからイケてるBulmaにしよう。

こんな感じでした。

最大の問題＝ファイルを跨いでスタイル探す行為のツラさ

今振り返ってみるとCSSの学習を阻害していた最大の要因が「ファイルを跨いでスタイルを探す行為」であると考えるようになりました。

例を出してみます。TailwindUIのサイトから以下のCTA(Call To Action)コンポーネントを見てみましょう。

CTA Sections↓

右側のタイトル部分について、HTMLとSCSS(BEM記法)はこんな感じになるかと思います。

index.html

<h2 class="cta__title">
  <span class="cta__title--primary">Ready to dive in?</span>
  <span class="cta__title--secondary">Start your free trial today.</span>
</h2>

foo.scss

.cta {
  // 他のいろんなたくさんのスタイル
  &__title {
    font-size: $font-large;
    font-weight: bold;
    letter-spacing: -0.025em;
    color: $dark-gray;
    @media screen and (min-width: 640px) {
      font-size: $font-2large;
    }
    &--primary {
      display: block;
    }
    &--secondary {
      display: block;
      color: $indigo;
    }
  }
  // 他のいろんなたくさんのスタイル
}

そしてその時に初心者の私の思考は多分こんな感じです。

(思考開始)

私「なるほどタイトルにはh2を使っていてclassにcta__titleがついているな。BEM記法だからctaでSCSSファイルを検索してみるか。」

私「foo.scssが見つかったぞ。よし、この中の__titleではどんなプロパティがついているのかな？」

私「ふむふむ、font-sizeでサイズを大きくして、boldだから太字にして、色を指定しているな。」

私「画面幅が640px超えたらさらに文字が大きくなるのかな。cta__titleクラスはなんとなくわかったぞ！」

私「次にhtml要素をもう一度みてみよう。h2の中にはspan要素が入っていてcta__title--primaryとcta__title--secondaryがついているな。さっきのfoo.scssに戻って・・・」

私「cta__title--primaryはブロックにしているだけか。cta__title--secondaryはブロックにした上で、さらに色を指定しているのか。よしtitle部分のCSSの構造が理解できたぞ！」

(思考終わり)

この時に重要になるのが「htmlファイルとscssファイルを行ったり来たりする」行為です。私にとってこれのスイッチングコストが非常に高い。

ましてSCSSファイルは目的の箇所を探すところから始まります。

BEM記法とSCSSのコンビだとcta__titleというクラス名で直接検索することはできないことが多いです(これは私がやり方知らないだけな気がするけど)。ctaとか__titleなどで全文検索して見つけ出す労力も半端無いです。しかもこれにmixinとか別に切り出されたモジュールが存在していて、そこにもアクセスしてスタイルを解釈する必要があったりします。

そんなこんなで色々探している間に脳のメモリが揮発していって、HTMLの構造を忘れそうになることもしばしば。

この、脳のスイッチングコストが高すぎて、CSSの勉強がとても辛く感じていました。この例は簡単な例ですが、もっと複雑なものは無限にありますし。

Tailwindは全てがHTMLに存在している

先ほどのHTMLとSCSSの例について、Tailwindだとどうなるか。

index.html

<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
  <span class="block">Ready to dive in?</span>
  <span class="block text-indigo-600">Start your free trial today.</span>
</h2>

先ほどの私の思考と、今初見で上記ファイルを見た時の皆さんの思考を比べて欲しいです。多少Tailwindの文法を知らなかったとしても、今、ここに、知りたい情報が、全て揃っていて、一瞬で構造を理解出来たのでは無いでしょうか。

初心者の私はこれにめちゃくちゃ感動しました。

私「読める・・・・読めるぞ・・・！！！」

瞬時にHTMLとスタイルの構造を理解できることに全能感さえ覚えました。

試行回数を稼ぐ

すぐ理解できるというのは素晴らしいもので、やる気がどんどん湧いてきました。Tailwindのコンポーネントサンプルはネットに無限に転がっているので、片っ端から読んでいき、TailwindPlayという実行環境で試し、HTMLだけで、プロパティをつけたり消したりして遊ぶことでプロパティと構造について最高速度の経験値を稼ぐことが出来ている感覚になりました。まさにはぐメタ狩りをしている時のレベル上昇です。

また、そうやってやっていくと見知らぬプロパティに遭遇します。その場合は、Tailwindの公式ドキュメントを見にいき、MDNドキュメントを見に行きながら新しいプロパティを学んでいきました。

HTML上で全てが理解できるので、「ファイル行ったり来たり」問題による脳内メモリのスワッピングを回避し、HTMLとCSSの構造把握にプロセスを全集中して勉強することで、嫌いだったCSS学習がむしろ好きになるという有様。Oh, My God.

「インライスタイルでもいいじゃん」という意見もあるかと思いますが、インラインスタイルで書かれたHTMLサンプルというのはネットで見つけづらいです。Tailwindという世界であれば先人がたくさんコンポーネントを作っているのでいろんな書き方をガンガン読み進めることが出来ました。

素のCSSも書けるようになった

Web画面を見たらTailwindでささっと再現できるようになってくると、素のCSS(SCSS)を書くのも出来るようになってきました。

初心者だった私はどんなプロパティがあるのかも、個々のプロパティがどういう特性なのかも知らない状態で、書こうと思っても何も書けない状態でした。

Tailwindのユーティリティクラスとしてp-4などの省略した形で覚えているので、すぐにCSSのプロパティをどう書くかは出てきませんが、「どういうプロパティを使うべきか」というのは理解できているので、素のCSSではどう書くのかを調べることが出来ます。いわば「方言を先に覚えているので後で言い換えをするだけならいくらでもできる」状態。この違いは重要です。

Tailwindありがとう

v1の頃に出会って3年ほどですが、出会っていなかったら、いまだにBulmaとかを訳もわからず使っていた可能性すらあります。あの時触れてよかったよかった。

Tailwindはv2、v3と上がっていき、どんどんいろんなことができるようになってきていて、個人的には「それどうなの？」と思うような機能もありますが、今後も個人開発では使っていくことになると思います。(業務でチームで使える気はしない)

書きたかったことは以上です。最後まで駄文にお付き合いいただきありがとうございました。