CSSフレームワークをもっと便利に！ @applyでコードをすっきり簡潔に

2024-05-17

CSSにおける@applyとは？

@applyの利点

コードの簡潔化: @applyを使用すると、ユーティリティクラスを何度も呼び出す必要がなくなり、コードが簡潔になります。
スタイルの再利用: @applyを使用すると、ユーティリティクラスをカスタムコンポーネント内で再利用することができます。
保守性の向上: @applyを使用すると、スタイルを1箇所で定義できるため、コードの保守性が向上します。

/* 通常のCSS */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
}

<button class="button">ボタン</button>

/* @applyを使用したCSS */
<button @apply="bg-blue text-white p-10 font-medium border-none">ボタン</button>

上記の例では、@applyを使用して、bg-blue, text-white, p-10, font-medium, border-none ユーティリティクラスのスタイルをボタン要素に直接適用しています。

@applyは、Tailwind CSSなどのCSSフレームワークでのみ使用できます。
@applyを使用すると、バンドルサイズが大きくなる可能性があります。

@applyは、Tailwind CSSなどのCSSフレームワークで使用される便利なディレクティブです。@applyを使用すると、コードを簡潔化し、スタイルを再利用し、保守性を向上させることができます。ただし、@applyを使用する際には、注意点も理解しておくことが重要です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS @apply サンプル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>見出し</h1>
    <p>本文</p>
    <button class="button">ボタン</button>
  </div>
</body>
</html>

CSS

/* style.css */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  @apply text-3xl font-bold mb-4
}

p {
  @apply text-gray-700 mb-6
}

.button {
  @apply bg-blue text-white p-10 font-medium border-none rounded
}

このコードでは、以下のスタイルを要素に直接適用しています。

h1要素: text-3xl, font-bold, mb-4
p要素: text-gray-700, mb-6
.button要素: bg-blue, text-white, p-10, font-medium, border-none, rounded

説明

text-3xl は、見出し1のフォントサイズを3倍に設定します。
mb-4 は、見出し1の下に4pxのマージンを設定します。
text-gray-700 は、本文のフォントの色をグレーに設定します。
bg-blue は、ボタンの背景色を青色に設定します。
p-10 は、ボタンの

@apply 以外の方法

ユーティリティクラスを要素に追加する

従来の方法では、要素にユーティリティクラスを追加することで、スタイルを適用します。これは、最も基本的な方法ですが、コードが冗長になる可能性があります。

<button class="button bg-blue text-white p-10 font-medium border-none rounded">ボタン</button>

CSS 変数を使用して、ユーティリティクラスのスタイルを定義し、要素に適用することができます。

:root {
  --bg-blue: #007bff;
  --text-white: #ffffff;
  --p-10: 10px;
  --font-medium: 500;
  --border-none: none;
  --rounded: 4px;
}

<button class="button" style="background-color: var(--bg-blue); color: var(--text-white); padding: var(--p-10); font-weight: var(--font-medium); border: var(--border-none); border-radius: var(--rounded)">ボタン</button>

.button {
  --bg-color: #007bff;
  --text-color: #ffffff;
  --padding: 10px;
  --font-weight: 500;
  --border: none;
  --border-radius: 4px;
}

<button class="button" style="background-color: var(--bg-color); color: var(--text-color); padding: var(--padding); font-weight: var(--font-weight); border: var(--border); border-radius: var(--border-radius)">ボタン</button>

プレフィックス付きクラスを使用する

一部のCSSフレームワークでは、プレフィックス付きクラスを使用して、ユーティリティクラスを識別することができます。

<button class="btn-primary">ボタン</button>

import React from 'react';

const Button = () => {
  return (
    <button className="bg-blue text-white p-10 font-medium border-none rounded">ボタン</button>
  );
};

export default Button;

それぞれの方法の利点と欠点

方法	利点	欠点
ユーティリティクラスを追加する	シンプル	コードが冗長になる可能性がある
CSS 変数を使用する	コードが簡潔になる	変数を定義する必要がある
カスタムプロパティを使用する	コードが簡潔になる	ブラウザによっては対応していない可能性がある
プレフィックス付きクラスを使用する	コードが分かりやすい	フレームワークに依存する
コンポーネントを使用する	コードを再利用しやすい	コンポーネントを定義する必要がある