BEMおじさんは考えた vol.1最近BEM的なマークアップを見ることがありますが...
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> 上記のコードはシンプルなので、各要素にスタイルを当てるとしたらこのような
SMACSSにBEMを取り入れたクラス名の命名規則 | SONICMOOV LAB
はじめに みなさまこんにちは！おはようございます！ マークアップエンジニアのうさこでございます！ またお前か・・・という声が聞こえてきそうですね・・・？花粉なんて爆発してしまえばいいと思っている今日この頃でございます。 さて・・・今回はコーディングをする際にきっと頭を抱える方も多いのでは・・・ クラス名の命名規則についてです！！ クラス名の命名・・・地味で単純な作業ですが、悩み始めると止まらず時間のロスに繋がっているのは紛れも無い事実なのです。。 目次 考え方 基本形 Prefix Block Element Modifier 注意点 さいごに 参考URL 考え方 目標はやはりこの4つとなります！ 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい なぜ SMACSS と BEM なのか BEM の Block や Element の考え方は素敵すぎるのですが、クラス名がものすごく冗
少し細かいBEMい話 - Qiita
BEMってむずかしい？ 2014年はたくさんのサイトでBEM 、もといBEMな命名規則が採用されたのではないかとおもってます。（拙著でも取り上げてます。） しかし、実際に導入されているサイトのコードをみてみると、んー、と感じることがあったり、または周りの開発者が、BEMむずかしい、といってるのを聞くことがある。 「これで合ってるの？」 むずかしい、と感じるのはたぶんBlockとElementとの関係やバランス、あとはクッソ名前が長くなってしまうことの不安にあるのではないかと考えてます。 例えば、ふとこのQiitaの記事ページのサイドバーにある、関連投稿モジュールをみてみましょう。 これをどうマークアップするか、どういうセレクタを書くかっていうのは人やプロジェクトによって全然違うし、このパターンがQiitaの中でどのくらい・どのように存在するかで変わります。 ただBEMを意識しはじめたことだ
BEM失敗談 その2 - canblr
BEM失敗談 その2 この記事はCSS Architecture Advent Calendar 2014 4日目の記事です。 1年ぐらい関わっていたプロジェクトで設計したCSSをざっくり振り返りつつ、そこで経験した失敗談を残しておこうと思います。 昨日の続きになりますが、ようやくタイトル通りBEMの話です。 BEM失敗談 その1 命名規則編 今回のプロジェクトで採用したのはいわゆるMindBEMdingで、あまり厳格にしすぎずゆるくやっていく方針でした。 冗長すぎる BEMを導入した際、ひとつのBlockに対してElementやModifierをどのようにつけていくのか、というのは特に決めていませんでした。 Moduleの中では1Blockに紐づくElementは大体1階層か2階層で、 3階層目ぐらいまで繋げる必要が出てきたら別のModuleにして…という目安で命名しています。 最初
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
BEMってどうよ的な流れ。
闇鍋 @_346_ 前にも BEM の話で疑問に挙げたけど、.foo のクラスを持つ見出しモジュールがあったとして、見出しの横にリンクがついたりすると .foo の親要素として div 等が必要になるわけだけど、その時、BEM の視点からその div にクラスをつけるとしたらどうすべきなのか？ と。 2013-10-02 16:39:47 リャマ㌠ @roatnek @_346_ そのdivが.fooになって.fooだったものが.foo__elementになる。見出しの横に付いたりするリンク（fooのelement）はあったりなかったりするけどそれでいいと思う。 2013-10-02 16:41:37 リャマ㌠ @roatnek BEMは、というかああいう厳密なネーミングルールはJavaScriptから触るとすごく便利。でもそのちょっとしたメリットのために「すべてに名前を付ける罰ゲーム」を
SassとBEM
SCSSファイルを整理し直している時、一気にBEMなクラスを使って書きなおしてやろうかとも考えていた。けど途中でSassならSCSSファイルの分割とその中での工夫によってBEMの構造を表現できそうと感じたので、今はそういう方向で試行錯誤している。実際BEMのウェブサイトでもファイルシステムを使ったBEMの表現方法という似た話が書かれているので荒唐無稽な考えではなさそう。 SCSSファイル名でblockを表現 その中でplaceholder selectorを使ってelementとmodifierを表現 外からはこのplaceholder selectorは使わない 既存のマークアップを利用したセレクターから@extendでBEM構造を関連付け HTMLファイルではBEMなクラスは振らない 必要な場合はシンプルなクラスを振る イメージはこのような感じ。HTMLでのマークアップの簡潔さは維持で
Maintainable CSS with BEM | Integralist
integralist BBC News Engineer: Object-Oriented Design principles using Ruby, PHP, BEM, AMD, TDD and BDD More info about me… What we'll cover reading time: approx. 7mins Introduction BEM: Block, Element, Modifier Example Why BEM over the others? Conclusion Introduction This is a super quick post to introduce you to a method of writing more maintainable CSS by using what's called "BEM". Update: @nec
MindBEMding – getting your head ’round BEM syntax – CSS Wizardry
25 January, 2013 MindBEMding – getting your head ’round BEM syntax Written by Harry Roberts on CSS Wizardry. Table of Contents Featured case study: NHS One of the questions I get asked most frequently is what do -- and __ mean in your classes? The answer is thanks to BEM and Nicolas Gallagher… BEM – meaning block, element, modifier – is a front-end naming methodology thought up by the guys at Yand
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BEMでmodifierを作る時に便利な&の変数化パターン - Qiita
BEM Grid
Discover the people, projects and passions that support Envato's community
Summary of http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ エッセンスだけ訳。翻訳の正しさは微妙。
https://github.com/juno/bem-methodology-ja/blob/master/definitions.md
Thoughts on BEM for inuit.css