一番詳しい(当社比) この記事は 大体1年くらいBEMを実践した中で溜まった知見的なものをルール・規則・注意点をまとめたマニュアルというかたちにしたもの. BEM初心者でもすぐ実践してもらえそうな感じに詳しくしたつもり. ちなみにBEMの実践というのはRails製Webアプリでの実践. ※注 多分に我流な部分も含まれている. この記事の全てを真似しようとせずに一部のエッセンスのみ取り入れるのもいいかもしれない. BEMとは Block Element Modifierの略で, Block => でかい括り Element => でかい括りの中にいる要素 Modifier => 上記2つの変化球 の3つに分けて考えていくことでCSSを設計・命名していく手法. 基本的な考えとか前提とか BEMの中でも特にMindBEMdingと呼ばれている命名法をベースとしている SCSSを使用する 基本的に
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
どうも、もりさんです。 すっかり月一更新となってしまいました。 以前、CSSの命名規則について考えるという記事を書きましたが、実際にBEMを使用してみて、すごく良かったので、まとめてみます。 CSSの命名規則について考える BEM(ベム)について CSSの命名規則の一つで、Block(ブロック)、Element(エレメント)、Modifier(モディファイア)の略です。 Elementの前には_(アンダーバー)二つ、Modifierの前には-(ハイフン)二つで区切って、class名をつけます。 .block__element--modifier{ ... } これらの区切り(セパレータ)は、必ずしも二つである必要はありません。 しかし、class名を見るだけで、BEMを利用していると分かるので、二つにした方が良いと、考えています。 それ以外、名前のつけ方には、特に難しいことはありません。
Key conceptsBlock Element Modifier BEM entity Mix BEM tree Block implementation Block implementation technology Block redefinition Redefinition level BlockA logically and functionally independent page component, the equivalent of a component in Web Components. A block encapsulates behavior (JavaScript), templates, styles (CSS), and other implementation technologies. Blocks being independent allows
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く