CSS vs SCSS vs TailwindCSS

導入

こんにちは。
最近TailwindCSSしか使っていない高専生です。

今回は既存のCSSやSCSSと今流行りのTailwindCSSを比較してみようと思います。
個人の主観が混じっているため、一意見として読んでいただけると幸いです。

CSS

特徴

• Webページのスタイルを定義するための標準的なスタイルシート言語
• シンプルで直感的な文法である
• ブラウザによってネイティブにサポートされている

長所

• 学習コストが低い
  • 基本的な文法はシンプルで初心者でも比較的簡単に理解ができる
• ブラウザの互換性
  • すべてのブラウザでサポートされており特別なツールやコンパイルが不要
• 軽量である
  • 余計なツールやライブラリを必要としないため、ファイルサイズが小さい

短所

• 保守性が低い
  • 大規模なプロジェクトではCSSファイルが複雑になり、保守が難しくなる
• 再利用が難しい
  • 同じスタイルを何度も書く必要がある
• 機能が少ない
  • 変数や関数、ネストなどの機能がなく、コードが長くなりやすい

下記が実装例です。

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.button:hover {
  background-color: #2980b9;
}

SCSS

特徴

• CSSの拡張版でSassの一種
• CSSと互換性があり、CSSのスーパーセットとして機能する
• 変数、ネスト、ミックスイン、関数などの高度な機能

長所

• 保守性が高い
  • 変数やミックスインを使うことで、コードの再利用性が高まり、保守が容易になる
• ネスト機能
  • セレクタをネストできるため、コードの可読性が向上する
• モジュール化
  • パーシャルファイルを使ってスタイルをモジュール化し、管理しやすくなる
• CSSとの互換性
  • 既存のCSSコードをそのままCSSファイルに取り込むことができる

短所

• 学習コストが高い
  • CSSに比べて機能が豊富なため、初心者には難しい
• コンパイルが必要
  • SCSSはブラウザで直接実行できないため、CSSにコンパイルする必要がある
• ツール依存
  • コンパイルのためにSassコンパイラなどのツールが必要

下記が実装例です。

$primary-color: #3498db;
$hover-color: #2980b9;

.button {
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: $hover-color;
  }
}

TailwindCSS

特徴

• ユーティリティファーストのCSSフレームワーク
• クラスを組み合わせてスタイルを適用する
• カスタマイズ性が高い

長所

• 迅速な開発
  • ユーティリティクラスを組み合わせることで、素早くスタイルを適用できる
• カスタマイズ性
  • 設定ファイルを編集することで、デザイントークンを簡単にカスタマイズできる
• 一貫性
  • PurgeCSSを利用することで、未使用のCSSを削除しファイルサイズを小さくできる

短所

• 学習コストが高い
  • ユーティリティクラスの命名規則を覚える必要がある
• HTMLが冗長になる
  • クラス名が長くなり、HTMLが煩雑になることがある
• 独自のアプローチ
  • CSSやSCSSとは異なるアプローチのため、既存のプロジェクトに導入する際に抵抗がある場合もある

下記が実装例です。

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
 ここをクリック
</button>

まとめ

• CSS
  • シンプルで軽量だが、大規模プロジェクトでは保守性が低い
• SCSS
  • 変数、ミックスイン、ネストなどの機能で保守性が高く、大規模プロジェクトに適している
• TailwindCSS
  • ユーリティクラスを組み合わせることで迅速にスタイルを適用できるが、HTMLが長くなってしまう（冗長になる）

https://developer.mozilla.org/ja/docs/Web/CSS/Reference
https://sass-lang.com/
https://tailwindcss.com/