— May I combine a tag and a class in a selector, such as button.button? Independent blocks and CSS selectors make your code reusable and modular. , このサイトに掲載されている記事・イラスト・写真・商標等の無断転載を禁じます。. BEM is a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit, and a lot more strict.

BEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。 第1回は、BEMをまったく知らない方向けの入門編です。 なぜBEMが必要なのか Wir unterstützen zugewanderte Menschen und mobile Arbeitnehmer*innen dabei, ihre Arbeits- und Sozialrechte wahrzunehmen – durch Beratung, Bildung und Sensibilisierung. Why do I need CSS classes for block instead of using semantic custom tags? — Why do I need CSS classes for block instead of using semantic custom tags? 劇場版『BEM』凄く頑張ってる〜声優宮田俊哉さんに逢えます！！！！ 絶対観てあげて欲しいです！！！！ 皆さまも〜是非お早めに！！！！ 最後に〜 みっくんへ. KITAYAMADOU？更新今日もありがとう〜 実は. To use BEM, you only need to employ BEM’s naming convention. 日本将棋連盟の AbemaTVトーナメント のページです。日本将棋連盟は伝統文化としての将棋の普及発展と技術向上や将棋を通じた交流親善などを目的とした公益社団法人です。 この記事ではフロントエンドの設計方法「BEM」を紹介します。第1回目はBEMのもっとも基本となるBlock、Element、Modifierの概念と、class名の命名ルールを解説しています。, 最近フロントエンド界隈で、『BEM』という言葉を見かけることが増えてきました。BEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。, 私たちはHTMLとCSSを使うことでしか、Webサイトを作ることができませんが、HTMLとCSSにはプログラム的な機能が備わっていません。そのために、フロントエンドエンジニアは次のようなトラブルに遭遇することがままあります。, id属性を使ったスタイル指定や、深すぎる入れ子は、スタイルの優先順位のコントロールが難しくなります。そこで、禁忌とされる!importantの多用を誘発することとなり、その結果、さらに優先度のコントロールが難しくなってしまいます。, HTMLの要素セレクタに直接スタイルが指定されていると、例えば、同じ見た目のまま見出しレベルだけを変えてスタイルを流用したい場合や、メニューの現在地だけリンクを外しつつスタイルは維持したいという場合に、CSSに手を加える必要があります。, 例えば、上記のような指定をしていると、同じスタイルのまま見出しレベルをh3にしたい場合、.box h2, .box h3 { ... }のようにセレクタを追加しなければなりません。さらに、同じ.box内に別のデザインの見出しを追加したい場合、border: none;などで上記のスタイルを打ち消さねばなりません。, もし要素セレクタでなく、class属性を使ってスタイルを指定していれば、このような問題は起こりません。, パーツ単体で独立しておらず、別のパーツに依存したスタイル指定になっていると、パーツを別の場所に移動した場合に、表示が崩れることがあります。, 例えば、上記のCSSの場合、.titleだけを別の場所に流用したいけれど、流用先は.entry-pageではない場合、このスタイルを流用することができません。, class名の命名ルールが決まっていないと、他の人がそのHTMLを見たときに、どこからどこまでがひとつのパーツのまとまりなのかわかりません。, JavaScriptの挙動をセットにしてパーツ化されていないと、そのパーツを別の画面に流用したときに、該当するCSSとJavaScriptを正確にコピーできないことがあります。そうすると、スタイルはきちんと当たっているけれど、JavaScriptが動作しないといったトラブルが起こる可能性があります。, BEMの公式ドキュメントでは、BEMという方法論が、どのような目標を達成すべく開発されたのかについて、次の3点を挙げています。, 開発スピードが速く、しかも長期間メンテナンスしやすい設計を実現するには、設計ルールを明確に規定する必要があります。ルールを明確に規定することで、class名の命名ルールやファイル構造などで、個人個人が悩む時間が少なくなり、その分開発スピードが上がることが期待できます。, チームの規模拡大が容易であるためには、チームに入った新しいメンバーが、できるだけ短期間で即戦力になれる必要があります。チームに新しいメンバーが入っても、そのメンバーがBEMさえ理解していれば即戦力になります。また、時間がたってもチームが変わってもメンテナンス可能な状態を維持できるでしょう。BEMはチームの共通言語の役割をします。, コードの再利用性は、Webサイトを構成するパーツがどの程度、独立して設計されているかで決まります。パーツを完全に独立させることができれば、コードの再利用が容易になります。ここでの再利用とは、CSSによる見た目の話だけでなく、JavaScriptによる振る舞いも含んでいます。, BEMはもともと、プロジェクトの成長にともなって、既存のページが変化していくことを前提として考え出されました。また、変更がある場合は、その対応コストをできるだけ低減することを目的としています。, BEMは多くの人がかかわり、長く運用されるプロジェクトに、特に向いていると言えるでしょう。キャンペーンページなどの期間限定でしか使われないサイトでも、開発をすばやく行えるため、BEMを利用する価値はあるでしょう。, BEMは、Block、Element、Modifierという3つの概念だけ理解してしまえば、あとはclass名の命名ルールに則って記述するだけの単純な方法です。, まずは、Block、Element、Modifierが、それぞれどのような関係にあるのかを、簡単に説明します。, 世の中に存在する多くのWebページは、ヘッダー、ナビゲーション、商品説明、フッターなどといった、パーツの集まりで構成されています。BEMでは、これらのパーツをBlockと呼びます。, 1つのBlockは、Block自身を構成する部品のようなものを有しています。例えば、検索フォームBlockなら、「入力フィールド」と「ボタン」の2つの部品で構成されています。これをElementと呼びます。, 同じBlockであっても、通常の状態とエラー状態などのように、装飾が異なることもあるでしょう。BEMでは、そうした装飾に関する調整を、Modifierと呼びます。, だいたいの関係がわかったら、以降、実際のコード例に沿って、それぞれをどのような考え方で設計するのかを解説していきます。, 例えば、次のようなコードの場合、searchという名前のBlockに、inputと、buttonという2つのElementが属していることになります。, 一般的なWebページの場合、Blockは何度も繰り返し出現することが想定できます。そのためBlockを識別するためにはid属性を使わずclass属性を利用します。, Blockはどこにでも置くことができ、Blockの中にBlockを含めることも可能です。ただし、CSSではBlockを入れ子にしてスタイルを指定してはいけません。, なぜなら、Blockは完全に独立し、Blockを別の場所に移動しても、単体で動作可能である必要があるからです。, ElementはBlockの構成要素で、そのElementが属するBlock内でのみ意味を成します。, Block名を含めることでclass名は冗長になりますが、次のようなメリットがあります。, 既存のBlockやElementと似ているけれど、見た目や動きが少しだけ違うものを作りたい場合には、新規にそれらを作るのではなく、Modifierを使うことができます。, 例えば、同じリストで、行頭記号が2種類以上存在する場合や、同じメニュー内の「タブ」であっても、現在ユーザーがいるタブだけ、見栄えを変える場合などです。, Modifierは、BlockやElementのバリエーションの軸（例：行頭記号）や、状態（例：現在地）を表すプロパティの役割をします。, Modifierは名前（key）と値（value）を持ち、複数のModifierを同時に使用することができます。, Modifierには、Blockに対するModifierと、Elementに対するModifierがあります。, さきほどの例で考えると、同じリストで、行頭記号が2種類以上存在する場合です。リストというBlockにModifierが必要です。, 次のようなコードの場合、listというclass名のBlockに、typeのバリエーションがあり、それはdiscとcheckという2種類だ、ということがわかります。, 同じメニュー内の「タブ」であっても、現在ユーザーがいるタブだけ、見栄えを変える場合は、タブというElementに対するModifierが必要です。, 次のようなコードの場合、menu__itemというclass名のElementに、state（状態）が違うものがあり、それはcurrentという現在地の状態を表すものだということがわかります。, これまでのサンプルコードの中で、クラス名の中に__というように、アンダースコアを二重に使っていることに気付くでしょう。この__や、_、-は、単語と単語を区切るために使用していて、BEMではこれをセパレーターと呼んでいます。, BEMでは、誰が見てもわかるように、Block、Element、Modifierそれぞれの区切りに、一貫したセパレーターを使うことが重要とされます*。, BEMは専用のツールを使ってWebサイトを生成する場合もあり、その場合はツールによって決められた、所定のセパレーターを使うことが重要となります。ですが、ここではツールを使わないことを前提として解説しています。どちらにしても、セパレーターを統一することは重要です。, ここでは、BEM開発者の記述方法に合わせたセパレーターを紹介していますが、次の3種類の区切りをきちんと区別でき、それが一貫していれば、セパレーターの種類は自由です。, 大切なのは、クラス名を見たときに、セパレーターの種類によって、それがBlockとElementの区切りなのか、Modifierの区切りなのか、それともただの単語の区切りなのかが、はっきり判別できるようにすることです。, 「Block__Element」と、区切り文字にアンダースコアを2つ繋げたものを使用します。, 「Block_key_value」または「Element_key_value」のように、区切り文字にアンダースコア1つを使用します。, BlockやElement名を、2つ以上の単語で表す場合は「単語-単語」のように、区切り文字にハイフンを使用します。, 単語の区切りにハイフン（ - ）を利用せず、キャメルケース（searchResultなど）にすると、BEMのセパレーターとの区別がつきやすくなります。, また、アンダースコアや連続セパレーターにこだわる必要もないため、次のように記述することもできます。, BEMの公式ドキュメントには、デザイナー、フロントエンドエンジニア、プログラマーなどの、プロジェクトに関わるチームメンバー全員がBEMを理解することで、次のようなメリットがあると述べられています。, 額面通りのメリットを実際に享受できるかどうかは、BEMの考え方を理解し、それぞれの立場で、間違いなくコードに反映できるかにかかっています。, 特に、Modifierという存在は、かなり概念的なものであるため、実際にModifierをどのように使うかは、チームメンバー内で意思の疎通が必要かもしれません。, 独特な記法に対する違和感ついては、デメリットという大げさなものではないかもしれません。従来のCSSを書き慣れている人が、BEMを使い始めると、感じるかもしれないことです。, 名前が冗長になりがちな点に関しては、Blockの名前をできるだけコンパクトにするしかないですが、単語を省略しすぎると意味が伝わらなくなり、そちらの方が問題があるため、バランスを見ながらある程度は割り切りましょう。, こういったHTMLとCSSの設計手法は、昔からいろいろと存在し、開発者それぞれが各自、似た考えを持って同じような設計*をしていたりします。しかし、そこまで具体的に系統だてられてルール化されている例は多くないと思われます。, ちなみにピクセルグリッドでも、BEMと似たような考え方でCSSを設計、運用しています。興味のある方は次のシリーズを参照してみてください。, 今回は、BEMの概要をお伝えするために、公式のドキュメントに書かれている内容を中心に解説しました。次回は、具体的なCSSの設計方法や、JavaScriptの扱い、Blockのカプセル化の考え方などについて掘り下げて紹介する予定です。, Web制作会社、自社サービス運営会社などでサービス企画、マークアップ・エンジニアの経験を積むも、退職して1年間専門学校に通う。プログラミングの基礎を学んだのち、2013年4月、ピクセルグリッドのフロントエンド・エンジニアとして入社。CSSの設計を得意とするが、JavaScriptも好き。

食品メーカー 倍率 低い, ふくまる カレンダー, 陽だまりの彼女 キャスト, ごちそうさん 息子 戦死, 北信越 デベロップ大会, 高円宮杯 Jfau18 2020 静岡 Aリーグ, 葵ステークス 過去, サムスン 孫, Nhk スマホ見せろ, フェアゲーム映画 1995, ジュニアユース 東京, 藤岡 貴裕, 吉岡里帆 本名, 365日の紙飛行機 Mp3, 鳥越 ロッテ なぜ, 内田篤人 雑誌 引退, チョコレートランキング 市販, ウルトラマンティガ 長野博 インタビュー, 韓国 マート 通販, 天平の歌 歌詞, 木内みどり 国籍, 日曜劇場 歴代視聴率, 三木谷浩史 家族, 写真 逆光 英語, コピック 逆光 塗り方, 男たちの大和 森脇, アンナチュラル 5話, 十勝スカイアース コロナ, アルゼンチン 地図, 中島みゆき 麦の唄 歌詞付き, 近鉄監督 西本, 明治チョコレート Cmソング, スーツ ドラマ 日本版 動画, 札幌 ダーツ イベント, ロッテ 球団 コーチ, 千葉ロッテマリーンズ ライブ, 高畑充希 映画 2019, プロ 野球 12 球団 スポンサー, ミッドウェイ ～運命の海～, 京都 中学 偏差値, オリックス 荒西 結婚, 橋本環奈 私服, 作陽高校 サッカー 事件, 免税手続き 日本, 吉岡聖恵 現在 画像, フェア ゲーム - 映画, ロッテ 練習試合, ロッテ ドラフト 2006, 太平洋戦争 戦犯 なんj, 金持ち エコノミークラス, 藤枝東高校 サッカー 推薦, 仮面病棟 ネタバレ 瞳, ダーツ ジャパンリーグ 日程, ジャニーズ 島根出身, 高橋優斗 彼女, ファレノプシス 花 育て方, アニメイト 提携倉庫, ひばりが丘 パークヒルズ 住み 心地, フランケンシュタイン あらすじ, 国際線 国内線 乗り継ぎ コロナ, 日テレニュース24 番組表,