CSSの命名規則にBEMを取り入れてみる - dskd

公開日2013-12-02タグAdvent CalendarBEMCSSHTML今年もあと一月ということでブログをリデザインしました。ということでこの記事はBEM Advent Calendar 2013 １日目のエントリです。日付過ぎてしまいましたね。 BEM って何？ BEM とは Block, Element, Modifier の頭文字をとったもので、フロントエンド設計において命名規則やモジュールの管理に前述の３種類の区分を取り入れたものを言います。今回はタイトルにもある通り、CSS の命名規則に BEM を取り入れてみるということで、BEM な CSS について記載します。 BEM るとどういう良いことがあるの？ いろんな人がすでに書いているので別エントリを参考になさってください。あるいは、今回の Advent Calendar に参加した方のエントリも参考になるかと思います。

[norando]

“BEMで難しいのはElementの取り方です。すんなり書けるのは２階層までで、３階層になると迷いが出ます。Blockを入れ子にしていくのか、Elementをつないでいくのか、やるなら統一しなければ BEM道ではない（部分的にルールが

[inureo]

bemの実例

[silem]

命名規則

[origami03]

CSSの命名規則にBEMを取り入れてみる 今年もあと一月ということでブログをリニューアルしました。ということでこの記事は BEM Advent Calendar 2013 １日目のエントリです。日付過ぎてしまいましたね。 Tags: via Pocket December 02, 2013

[iWest7284]

CSSの命名規則にBEMを取り入れてみる 今年もあと一月ということでブログをリニューアルしました。ということでこの記事は BEM Advent Calendar 2013 １日目のエントリです。日付過ぎてしまいましたね。 Tags: via Pocket December 02, 2013

[UDONCHAN]

参考になる

[torounit]

BEM道は深い。。BEM Tree = DOM Tree なんだけど、それでもDOM Treeの変更にはある程度強くしようとすると。。。。ぐぬぬ。

[poppun1940]

CSSの命名規則にBEMを取り入れてみる 2013/12/02 01:15 category : CSS 今年もあと一月ということでブログをリニューアルしました。ということでこの記事は BEM Advent Calendar 2013 １日目のエントリです。日付過ぎてしまいましたね。 BE

[ruedap]

block__element__elementやblock--modifier--modifierは個人的にはナシにしてるけど、アリの人の方が多いのかな〜

[nilab]

CSSの命名規則にBEMを取り入れてみる | dskd : Block, Element, Modifier