ページのイメージ
WEB開発 2017/07/26

CSSの命名規則にBEM方式はどうだったか

中村享世
中村享世
  • このエントリーをはてなブックマークに追加

弊社のclass名の命名規則はBEM方式をベースに作られています。

メリット、デメリットはいろいろありますが実際使ってみてどうだったかご紹介しようと思います。 

BEM方式とは

Block(親要素)__Elements(子要素)--Modifier(修飾)の順に記述する命名方式です。

読み方はベム方式と読むようです。

メリット

(1)ブロック単位で作っていくのでパーツ化することで使いまわししやすい

(2)入れ子の関係がわかりやすい

(3)親さえ被らなければ他に影響を与えない 

(4)子要素のスタイルを指定するのにその要素のクラス名だけで指定できる(名前が被らないから)ため、セレクタの階層が浅くできる=読み込み速度が早くなる

デメリット

(1)名前が長くなる

 

しずおかオンラインオリジナル命名規則

オリジナル命名規則1

一般的なBEM方式の区切りには、__(アンダーバー2つ)--(ハイフン2つ)を使用していますが、長くなることが多いので弊社の命名規則ではそれぞれ一つにしています。

オリジナル命名規則2

「 親要素_子要素_孫要素 」まではBEM方式で書きますが、ひ孫要素以降は例外として

.el_要素の名前

という命名規則にしています。elelementsの略です。

※この場合は他のブロックと被ることがありますので、セレクタの記述には親要素も必要です。

 

LessSassを使って記述すると下記のように書けるのでBEM方式を採用しつつ、長くなりすぎる問題が解決しました。

.news_list_contents{
.el_title{}
.el_image{}

オリジナル命名規則3

同じelementの色違いなど、装飾だけが変わる場合には

.is-装飾名

という命名規則を使います。

classを付け加えることで表示を変えることができます。

.is-current{}

このオリジナル規則はいつもお世話になっている外部パートナーの方にご提案いただきました。ありがとうございました。

オリジナル命名規則を使ってみて思うこと

BEM方式にすることで良かったと感じるのはネーミングに時間がかからなくなったことです。

親さえ決まれば子要素は「title」「detail」「image」などお決まりのパターンで済みます。

他のブロックに影響を与えないので子要素の設計に入った段階ではもう他を気にしなくても良いというのはコーディングしていく上で本当に楽になったなと感じます。

Category

Ranking