CSS Modulesで本格的に業務で使って気をつけたいこと

CSS Modulesは、React.jsをはじめとするフロントエンドのフレームワークでのスタイル適用において、非常に人気のある方法となっています。しかし、実際に業務で使用する際には、いくつかの注意点やベストプラクティスが存在します。本記事では、CSS Modulesを業務で使用して得られた経験と、その中での学びを共有します。

1. BEM記法などのルールの採用は必要
2. :global の使用を避ける
3. まとめ

1. BEM記法などのルールの採用は必要

BEM（Block, Element, Modifier）は、CSSのクラス名の命名規則として非常に人気があります。CSS Modulesを使用する際にも、BEM記法の採用は多くのメリットをもたらします。

クラス名の衝突を避ける: CSS Modulesはスタイルのスコープをコンポーネントに限定しますが、コンポーネント内でのクラス名の衝突は避けることができません。BEMを使用することで、このような衝突を効果的に防ぐことができます。
可読性の向上: BEM記法を採用することで、クラス名からそのスタイルがどの部分（BlockやElement）に適用されるのか、どのようなバリエーション（Modifier）であるのかを容易に理解することができます。

具体的な例:

以下のようなCSSを考えてみましょう。

.button {
  font-size: 18px;
  padding: 4px;
  border: 1px solid #000;
}

.button.btn--white {
  color: white;
}

.button.btn--black {
  color: black;
}

.button.btn--lg {
  font-size: 20px;
  padding: 8px;
}

.button.btn--sm {
  font-size: 14px;
  padding: 2px;
}

React.jsのコンポーネントでは、このスタイルを次のように適用することができます。

import React from 'react';
import styles from './Button.module.css';

const Button = ({ color, size, children }) => {
  let colorClass = '';
  let sizeClass = '';

  if (color === 'white') {
    colorClass = styles['btn--white'];
  } else if (color === 'black') {
    colorClass = styles['btn--black'];
  }

  if (size === 'lg') {
    sizeClass = styles['btn--lg'];
  } else if (size === 'sm') {
    sizeClass = styles['btn--sm'];
  }

  return (
    <button className={`${styles.button} ${colorClass} ${sizeClass}`}>
      {children}
    </button>
  );
};

export default Button;

しかし、Atomic Desginを採用したりするとOrganismsやTemplatesでBEMのルールでCSSを使いたい時、ちょっと子要素で使いたい時にクラス名を振る必要が出てきてしまいます。
ルールの緩和が部分的に必要必要になります。

2. :global の使用を避ける

CSS Modulesには、:global() という機能がありますが、これを使用することは推奨されません。

スタイルの干渉: :global() を使用すると、そのスタイルはコンポーネントのスコープを超えて適用される可能性があります。これにより、意図しないスタイルの干渉が発生するリスクが高まります。
CSS Modulesのメリットの喪失: :global() の使用は、CSS Modulesの主なメリットである「スタイルのスコープの限定」を無効にする可能性があります。