ReactでのCSS設計におけるBEMの使い方

Reactはコンポーネント指向のJavaScriptライブラリで、HTMLやCSSもコンポーネント単位で管理することができます。そのため、Reactを使った開発において、CSSの設計方法は非常に重要です。今回は、BEMというCSS設計方法について紹介します。

BEMはBlock Element Modifierの略で、コンポーネントを構成する要素（Block）とその中に含まれる要素（Element）を識別するための命名規則です。また、状態（Modifier）を表すクラス名を付与することで、より柔軟なデザインを実現することができます。

例えば、ボタンを作成する場合、以下のようなHTMLとCSSを記述することができます。

<button class="button button--primary">Click me!</button>

.button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
}

.button--primary {
  background-color: #dc3545;
}

上記の例では、.buttonがBlock、--primaryがModifierに対応しています。また、Elementを使う場合は、以下のように記述することができます。

<div class="card">
  <h2 class="card__title">Title</h2>
  <p class="card__description">Description</p>
</div>

.card {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
}

.card__title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card__description {
  font-size: 16px;
  line-height: 1.5;
}

上記の例では、.cardがBlock、__titleと__descriptionがElementに対応しています。

BEMは、コンポーネント指向の開発において、コンポーネントの再利用性を高めることができます。また、クラス名の命名規則が明確になるため、複数人での開発においてもコードの可読性を高めることができます。

以上、ReactでのCSS設計におけるBEMの使い方について紹介しました。