BEMをSassで快適に書く方法
BEMとはBEMの概要もうすでにいろんなブログやQiitaなどで書かれていると思いますが、自分の頭を整理するためにも書いておきます。BEMはロシアの検索エンジン大手のYandexにより以下を達成するために開発された「cssの記述方法論」です。CSSセレクタの「命名規則」とも言われています。 Block, Element, ModifierBEMは、セレクタの役割を「Block」「Element」「Modifier」の3つの概念に分けて考えるCSSの設計思想です。BEMのドキュメントによると、Block、Element、Modifierは、それぞれ以下のように定義されています。 Block「Block」は独立したエンティティ（実体）であり、アプリケーションを「構成するパーツ」です。Blockは単一で用いることも可能だし、他のBlockを含んで複合的に用いることも可能です。Block名は基本的
実践 めんどうくさくない BEM - ダーシマ・ヱンヂニヤリング
この記事は BEM Advent Calendar 2013 の１２日めの記事です。 BEM は優れた方法論だと思うが、大変めんどうくさいことを強いてくることがある。この記事ではそんなめんどうくさい BEM を、少しでもめんどうくさくない BEM に変えられるかどうかを思索するものである。なお、めんどうくさくなくする過程で「それは既に BEM ではな」くなっている面もあると思うが、そこは承知の上なので念頭に置かれたし。 CSS セレクターにタグを書くのは本当にダメなのか 例えば以下のコードがある。 <section class="item-list"> <h1>アイテム一覧</h1> <ul> <li> ... </li> <li> ... </li> <li> ... </li> </ul> </section> 上記のコードはシンプルなので、各要素にスタイルを当てるとしたらこのような
BEMを参考にしたCSS設計 - Qiita
現時点でBEMによるCSS設計はベターだと思う。でもベストではない。 なにがベストに思わせないのかと言えば冗長的な命名方法。これだけ。 アンスコやらスラッシュが2連続くところが嫌すぎて困る。 というわけで。 BEMの命名方法をカスタマイズしてみる。 BEMの基本設計 BEMとは Block ⇒ 塊 Element ⇒ 要素 Modifier(keyとvalueで表す) ⇒ 状態（変化） の事を言う。 BEM（ベム）と呼ぶようだが、某妖怪人間ではない。 参考：知っておきたいHTMLテンプレート設計法 - OOCSSの基本 | CodeGrid BEMのお約束 BlockとElementの区切りはアンスコ2個（__） BlockまたはElementとModifierの区切りはハイフン2個（--） ModifierのKeyとValueの区切りはアンスコ1個(_) BlockやElementを2つ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BEM