BEM?WebサイトやLPの模写コーディングをしていると、色々な「クラス名」が何かのルールに従って使用されている事に気がつくと思います。え、初心者の頃は、見た目を揃えるのに必死で「クラス名」なんて気が回らない??ですが、「分かりやすく」、「読みやすい」クラス名を付ける事が出来るだけで、効率的にWebサイトを作成出来ますし、修正も簡単になります。複数人で作業する場合は、「命名規則」は必須です。今日は、世界で最も良く使われているCSSの命名規則である「BEM」について学びましょう!目次BEMとは何か?命名規則って何?命名規則のポイント使用方法と役割が分かりやすいとは?BEM(MindBEMding)の名前の付け方Blockとは何か?Elementとは何か?Modifierとは何か?BEMを使うメリットBEMを使うデメリットまとめ参考リンクBEMとは何か?BEMとは、「Block」、「Element」、「Modifier」の略で、要素を3つのいずれかに分類して命名していく命名規則です。BlockElementModifier詳細については、後で具体例を挙げて見ていきます。命名規則って何?命名規則は、クラスやIDなどの名前を決めるルールの事です。単純なものから、複雑なものまで色々な方法が存在してますが、以下の3つが最も有名です。BEMOOCSSSMACSS命名規則のポイントどんな命名規則を使っても、ポイントは共通です。それは、そのクラスにおけるCSSの「使用方法」と「役割」がハッキリしているか?という事です。見て、そのクラスが「どこ」に、「どの様な形」で使われているのか分からないのは良くない命名です。後者の方が使用目的が明確で良い命名と言えます。15px;}BEM(MindBEMding)の名前の付け方BEMの名前の付け方は簡単です。BlockBlock__ElementBlock__Element--ModifierElementの前は、アンダースコア(_)2つで区切り、Modifierの前はハイフン(-)2つで区切ります。この名前の付け方は、大元のBEMではなく、「MindBEMding」のものですが、一般的にはこちらの方が良く使われているので、こちらを覚えておけばOKです。MindBEMdingBlockとは何か?Blockとは「独立したモジュール」で、Webサイトを構成するパーツです。「独立」というのがキーワードです。上の例だと、「Card」そのものが一つのブロックになっています。Blockは独立しているので、Block毎移動させたり、Blockの中にBlockを含める事が可能です。Elementとは何か?Elementとは、Blockに所属する要素です。Elementという単語そのものが、「要素」って意味ですしね。Elementは、必ず元となるBlockの中に入ります。先ほどの「Card」ブロックの例を取ると、「画像」、「タイトル」、「本文」、「ボタン」がElementになります。Elementの前は、アンダースコア(_)2つで区切るので、例えば、「card__card-image」と言った形になります。Modifierとは何か?Modifierとは、Blockまたは、Elementの変化した状態を表す要素です。先ほどのボタンの上にカソールを合わせた際に色が変更する場合、Modifierで表現します。Modifierの前はハイフン(-)2つで区切るので、「card__card-image–hover」といった形で書かれます。BEMを使うメリットBEMを使うメリットは、「メンテナンスが容易」という事です。BEMは、細かくクラス名を指定するCSSの設計手法です。スタイルが適用される範囲がある程度絞られるため、CSSを修正した時に思わぬ所に影響が発生する事を防ぐ事が出来ます。シンプルで大抵の人が知っているというのも大きなメリットです。シンプルだと、意識せずにルールを守る事が出来ますよね?BEMを使うデメリットBEMは、クラス名を細かく管理する手法なので、クラス名が長くなってしまうというデメリットがあります。個人的には、メンテナンス性や読みやすさが向上するなら、このデメリットを上回る大きなメリットがあると思っています。まとめこの記事では、CSSの設計手法としてBEMを例に見てきました。「思ったよりシンプルだな?」と思ったかもしれません。BEMはシンプルで分かりやすいので、ルールとして機能しやすいです。どんなに素晴らしいルールでも、覚えずらかったらそもそも守られず意味ないですからね。「分かりやすく」、「読みやすい」クラス名を付ける事は脱初心者の第一歩ですが、実際に手を動かしていく中で直ぐに習得出来ると思います。BusinessProfileこんにちは、「佐々木ケン」です。「技術」と「稼ぐ力」を兼ね備えた強い個人を生み出すべく活動しています。「あなたにはビジネスで遠回りしてほしくない!」との信念の元、自分の体験をベースに、ビジネスを構築する方法をお伝えしてます。View)」って何?「MVC」と何が違う?【完全版】Amwayを勧誘する人の特徴。