Now loading .....

rolling

ところでBEMって何? | 東京・名古屋のwebフリーランスエンジニア 大林良平

ryohei obyashi

menu

TOP > ブログ > CSS > ところでBEMって何?

ところでBEMって何?

BEMとは?

2019/06/27

はじめに

以前、ブログでコーディング規約を書かせて頂きましたが、ここ最近、企業様とのお話でBEMを使用したコーディングルールが大半を締めているので、BEMについてもう少し深く書きたいと思います。
よくHTMLやCSSは簡単という意見を聞きますが、私的には実装は他の言語と比べて、しっかり反映してくれるだけで、全く簡単と言いきれないです。逆に何が難しいか…それは保守管理。

下記のコード

ぶっちゃけ、divや命名などをテキトーにやったとしても、レイアウトさえ崩さなければいいんですが…
修正作業やコンテンツの追加の際にこのコードが適切かというと、適切ではないです。

そこで使うのがBEM(ベム)

BEMとは、Block、Element、Modifierの事です。
Blockは
Elementは要素
Modifierは状態(変化)
日本語にするとこんな意味になりますが、実際どんなコードか下記のようなものになります。

つまり

“gyousha”=>block
“gyousha__outer”など=>Element
“gyousha__txt–colorRed”=>Modifier

となります。

私の場合は、gyousha__txt–colorRedのcolorとredがありますが、2つ以上の単語が列なるものに対しては、2つ目以降の単語の一文字目は大文字で対応しております。
また、これに関して-(ハイフン)を使ったりといろんなやり方がありますが、Block、Element、Modifierの理論とid名をページ内リンクだけ使用さえすれば、大丈夫です。

BEMでもいろんな書き方があります。下記の参考のURLをご覧ください。

※参考
BEMを参考にしたCSS設計
一番詳しいCSS設計規則BEMのマニュアル

最後に

プロジェクトでチーム開発をする事が多くなるため、もうちょい突っ込んで書いてみました。
楽なのは命名規則に困らないのと、学習コストもそんな仕切りが高くはないのが特徴ですが!!
ただ、今後は命名の長さを抑えていきたいなと考えております。

その他記事

blogに戻る一覧

webサイトの制作、webサービスの立ち上げ
webシステムの開発、アプリケーションの開発
是非、contactまでお問い合わせくださいませ