Help us understand the problem. What is going on with this article?

現在のプロジェクトで使用している CSS 設計ルール (BEM ベース) のまとめ

More than 3 years have passed since last update.

この記事は、現在僕が携わっているひだまりプロジェクト (仮称) で使用している CSS 設計ルールについてまとめたものです。

ベースとなる CSS 設計

  • BEM (MindBEMding)
    • BEM 自体についての説明は省略します。
    • 一部 SMACSS を参考にした独自ルールを取り入れています。詳しくは後述します。

ルール

(1) Element をネストしない

BEM を使用する際の大原則として block__element という対応関係を厳守します。

NG

category__item__nameblock__element1__element2 と Element がネストしています。

<head>
  <style>
    .category-list {}
    .category-list__item {}
    .category-list__item__name {}
  </style>
</head>
<body>
  <div class="category-list">
    <div class="category__item">
      <span class="category__item__name"></span>
    </div>
  </div>
</body>

OK

category-list__itemitemcategory-list という Block の Element である一方で、
name という Element を持った category-item という Block でもあるとみなします。

<head>
  <style>
    .category-list {}
    .category-list__item {}
    .category-item {}
    .category-item__name {}
  </style>
</head>
<body>
  <div class="category-list">
    <div class="category__item category-item">
      <span class="category-item__name"></span>
    </div>
  </div>
</body>

(2) Modifier の代わりに SMACSS の State を使う

ひだまりプロジェクトの独自ルールとして、BEM の Modifier の代わりに SMACSS の State ルールを使うようにしています。
State ルールでは is- あるいは has-というプレフィックス付きのクラスを使用します。本ルールではこれを Modifier 付きのクラスの代わりに使用します。
このルールを用いることで、Modifier を用いる際にセレクタ記述が冗長になってしまうのを防ぐことができます。
これは JavaScript (jQuery) でクラスを追加したり削除する場合にも都合がいいです。

NG

HTML

<head>
  <style>
    .category-item {}
    .category-item--focused {}
  </style>
</head>
<body>
  <div class="category-item category-item--focused">
    <span class="category-item__name"></span>
  </div>
</body>

JavaScript

var block = 'category-item';

$('.' + block).addClass(block + '--focused');

OK

HTML

<head>
  <style>
    .category-item {}
    .category-item.is-focused {}
  </style>
</head>
<body>
  <div class="category-item is-focused">
    <span class="category-item__name"></span>
  </div>
</body>

JavaScript

$('.category-item').addClass('is-focused');

(3) 原則としてセレクタをネストしない

原則としてセレクタをネストしてはいけません。それぞれのセレクタを独立させます。
Sass を使用する場合も、CSS にコンパイルした後でセレクタがネストしないようします。
具体的には & (Referencing Parent Selectors) を使用します。

NG

Sass

.category-list {
  .category-list__item {}
}

CSS

.category-list .category-list__item {}

OK

Sass

.category-list {
  &__item {}
}

CSS

.category-list {}
.category-list__item {}

(4) Block に State を適用する場合は Element のセレクタをネストする

Block に State ルールを適用し、それが Element にも影響する場合は、ルール (3) の例外としてセレクタをネストさせます。
これは State の指定が冗長になるのを防ぐためです。
ただし、影響範囲が最小となるように、可能であれば子セレクタ > を使用します。

NG

Sass

.category-item {
  &.is-focused {}
  &__number {
    &.is-focused {}
  }
  &__name {
    &.is-focused {}
  }
  &__description {
    &.is-focused {}
  }
}

CSS

.category-item.is-focused {}
.category-item__number.is-focused {}
.category-item__name.is-focused {}
.category-item__description.is-focused {}

OK

Sass

.category-item {
  $block: &;

  &.is-focused {
    // & > &__name
    // のように Block の部分に & を使うと、コンパイル後に
    // .category-item.is-focused > .category-item.is-focused__number
    // と変換されてしまう。
    & > #{$block}__number {}
    & > #{$block}__name {}
    & > #{$block}__description {}
  }
}

CSS

.category-item.is-focused {}
.category-item.is-focused > .category-item__number {}
.category-item.is-focused > .category-item__name {}
.category-item.is-focused > .category-item__description {}

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした