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

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

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

BEM方式とは

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

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

メリット

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

（２）入れ子の関係がわかりやすい

（３）親さえ被らなければ他に影響を与えない 

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

デメリット

（１）名前が長くなる

 

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

オリジナル命名規則１

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

オリジナル命名規則２

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

.el_要素の名前

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

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

 

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

.news_list_contents{
.el_title{}
.el_image{}
} 

オリジナル命名規則３

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

.is-装飾名

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

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

.is-current{}

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

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

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

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

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

しずおかオンライン中途採用社員も、積極募集中！
しずおかオンラインののスタッフとして、地域の魅力を伝える仕事です。
くわしくはこちら！

※「イエタテ」は2023年4月より㈱くふう住まいにて運営しています