【完全ガイド】CSS結合子について〜TailwindCSSでの活用も添えて〜

はじめに

モダンなWebフロントエンド開発において、CSSのスタイル管理は重要な課題の一つです。特にスタイルの衝突や誤作動を防ぐ為、スタイル適用範囲の管理にはいくつかのアプローチがあります。「CSS結合子」もそこで力を発揮するアプローチの一つになります。

この記事では、従来のCSSでの結合子の使用方法に加えて、TailwindCSSでの活用方法まで解説していきます。

ご一読いただけると嬉しいです

CSS結合子とは何か？

以下のコードを見てください。

ulとliに何か異物がありませんか？
不自然な空白や大なり記号(>)、プラス記号(+)やチルダ記号(~)が見れると思いますが、そうこれが「CSS結合子」です。

ul li {
    color: #333;
}
ul > li { 
    color: #333;
}
ul + li {
    color: #333;
}
ul ~ li {
   color: #333;
}

CSS結合子の重要性

CSS結合子を使いこなすことで、以下のような利点が得られます：

• スタイルの適用範囲を正確にコントロール
• コードの保守性向上
• 意図しないスタイルの適用を防止
• より効率的なCSSの記述が可能

無論JavaScriptのDOM操作によるクラスの付け外しで、類似した現象を引き起こすことは可能です。
しかし、CSS結合子はブラウザによって最適化されている為、CSSで簡単に実現できる範囲は、JSを使用しない方が複雑にならずいいかと思います。

主要なCSS結合子とその使い方

1. 子孫結合子（スペース）

最も基本的な結合子です。

article p {
    color: #333;
    line-height: 1.6;
}

2. 子結合子（>）

直接の子要素のみを選択します。

nav > ul > li { 
    margin: 0 1rem;
    padding: 0.5rem 0;
}

TailwindCSSでの使用例：

<nav>
  <ul class="[&>li]:mx-4 [&>li]:py-2">
    <li>Home</li>
    <li>About</li>
  </ul>
</nav>

3. 隣接兄弟結合子（+）

直後の要素を選択します。

h2 + p {
    font-size: 1.1em;
    font-weight: 500;
}

TailwindCSSでの使用例：

<div class="[&>h2+p]:text-lg [&>h2+p]:font-medium">
  <h2>タイトル</h2>
  <p>この段落は強調されます</p>
  <p>この段落は通常表示です</p>
</div>

4. 一般兄弟結合子（~）

後続のすべての兄弟要素に適用します。

.error-message ~ input {
    border-color: #ff0000;
    background-color: #fff8f8;
}

TailwindCSSでの使用例：

<div class="[&_.error~input]:border-red-500 [&_.error~input]:bg-red-50">
  <span class="error">エラーメッセージ</span>
  <input type="text">
  <input type="email">
</div>

TailwindCSSでの結合子の活用

TailwindCSSでは従来のCSS結合子の他、プラグインでのカスタム、擬似クラスやVariantsなど、いくつかスタイル適用範囲のコントロールに対してアプローチ方法があります。

Tailwind Variantsの使用

Reactプロジェクトで採用されることが多いように思うので、コード例はtsxファイルとして記述します。

導入に関しては、今回は省略させていただきますが、以下公式ドキュメントが参考になるのでご役立てください
https://www.tailwind-variants.org/docs/introduction

TailwindCSSでは、例えばTailwind Variantsライブラリを使用することで、より宣言的で保守性の高いコードを書くことができます。

# Tailwind Variantsのインストール
npm install tailwind-variants

import { tv, type VariantProps } from 'tailwind-variants'

const styles = tv({
  base: 'space-y-4',
  variants: {
    variant: {
      primary: 'children:text-blue-600',
      secondary: 'children:text-gray-600',
    },
    spacing: {
      compact: 'children:py-1',
      normal: 'children:py-2',
      relaxed: 'children:py-4',
    },
  },
  defaultVariants: {
    variant: 'primary',
    spacing: 'normal',
  },
})

interface ListProps extends VariantProps<typeof styles> {
  items: string[]
  className?: string
}

export const List = ({ items, ...props }: ListProps) => {
  return (
    <ul className={styles(props)}>
      {items.map((item, i) => (
        <li key={i}>{item}</li>
      ))}
    </ul>
  )
}

export default List

//使用例
import List from './List'

const Example = () => (
  <div className="space-y-8">
    <List items={['Item 1', 'Item 2']} />
    <List 
      items={['Item 1', 'Item 2']}
      variant="secondary"
      spacing="relaxed"
    />
  </div>
)

Variantsで定義されたスタイルが使用例に適用されるので、以下のようになります。
結合子とはまた違ったアプローチですが、スタイル適用のコントロールという意味では共通しているかもしれません。

[リスト1]
Item 1 （青色、上下に中程度のパディング）
Item 2 （青色、上下に中程度のパディング）

（大きめの余白）

[リスト2]
Item 1 （グレー、上下に大きめのパディング）
Item 2 （グレー、上下に大きめのパディング）

組み込みのModifiersの活用

TailwindCSSには、結合子のような機能を実現できる組み込みのモディファイアがあります。

index.html

<!-- 子要素に対するスタイリング -->
<div class="children:mt-4 children:p-6">
  <!-- 
  出力されるスタイル：
  - すべての直接の子要素に上部マージン1rem
  - すべての直接の子要素に1.5remのパディング
  -->
  <div>First child</div>
  <div>Second child</div>
</div>

<!-- 特定の子要素のスタイリング -->
<nav class="siblings:mt-4 first:mt-0">
  <!-- 
  出力されるスタイル：
  - 最初以外のすべてのリンクに上部マージン1rem
  - 最初のリンクは上部マージンなし
  -->
  <a href="#">Link 1</a> <!-- マージンなし -->
  <a href="#">Link 2</a> <!-- 上部マージン1rem -->
  <a href="#">Link 3</a> <!-- 上部マージン1rem -->
</nav>

プラグインでのカスタマイズ

特定のパターンを頻繁に使用する場合は、カスタムプラグインを作成できます：

tailwind.config.js

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(({ addVariant }) => {
      // 直接の子要素に対するバリアント
      // '& > *' は直接の子要素のみを選択
      addVariant('direct-child', '& > *')
      
      // 特定の要素の後に続く要素
      // '& h2 + *' はh2要素の直後の要素を選択
      addVariant('after-heading', '& h2 + *')
    }),
  ],
}

index.html

// 使用例
<div class="direct-child:mb-4 after-heading:font-medium">
  <!-- 
  出力されるスタイル：
  - すべての直接の子要素に下部マージン1rem
  - h2要素の直後の要素にfont-medium（フォントの太さ500）を適用
  -->
  <h2>Title</h2>
  <p>This paragraph will have font-medium</p> <!-- h2直後なのでfont-medium適用 -->
  <p>Another paragraph</p> <!-- 通常のフォントウェイト -->
</div>

ベストプラクティス

1. 詳細度の考慮
   • 従来のCSS同様、TailwindCSSでも詳細度に注意を払う
   • 必要以上に複雑な結合子の使用は避ける
2. パフォーマンスへの配慮
   • 深い階層での結合子の使用は避ける
   • 可能な限り直接的なセレクタを使用
3. メンテナンス性
   • コンポーネント指向の設計を意識
   • 再利用可能なパターンはユーティリティとして抽出

ここまで結合子を推奨するような書き方をしてきたように思いますが、便利さと引き換えに「*クラス名で検索しづらくなる:」、「ぱっと見だとわかりずらい」などの理由から使用を禁止されているケースもあるため、使用には注意が必要です。

まとめ

CSS結合子は、従来のCSSでもTailwindCSSでも強力なスタイリングツールとして活用できます。
TailwindCSSでは、従来のCSS結合子も使用できますが、より宣言的な方法で結合子やプラグインなどを利用することができるので、それら独自のベストプラクティスを理解しておくことでよりコードの書き幅が広がるのではないでしょうか。

• 各結合子の特徴と使用場面を理解する
• TailwindCSSならではの修飾子構文を活用
• メンテナンス性とパフォーマンスを考慮した使用を心がける

これらの知識を活かして、より洗練されたUIデザインを実践していきましょう！
本記事をご一読いただきありがとうございました