はじめに
BEMとは？
BEM – Block Element Modifierは、フロントエンド開発で再利用可能なコンポーネントとコード共有を作成するのに役立つ方法論です。
方法論なんですねー。
特徴
Easy
使うにはBEMの命名規則をhtmlとcssに当てはめるだけです。
Modular
モジュール化します。モジュール化とは？独立化っことです。
独立化することにより再利用が簡単にできるようになります。
Flexible
方法論やツールを組み替えたりフレキシブルに使用することができます。
どっから読めばいいの？
イントロダクション
GEMという方法論の論法についての説明。
この方法論が出来上がった背景も交えて、「そもそも」の部分についての説明があります。
また他のCSS設計方法論との比較もあります！
http://getbem.com/introduction/
ネーミング
イントロダクションが「そもそも」のところについての説明なら、
こちらは「実際」の使い方についての説明。
基本的にイントロダクションとネーミングの２つを読めばOKな感じです。割と負担なくていい感じですね。
http://getbem.com/naming/
FAQ
よくある質問と回答。
自分が思った疑問点が書いてあることあります。（そりゃそうだろ）
http://getbem.com/faq/
使用例
実際にコードを見たほうが雰囲気がつかみやすいと思います。
こんな感じです。
パット見ただけだとやや冗長な印象を受けますね。
<form class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input
class="form__submit form__submit--disabled"
type="submit" />
</form>
form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }
最近のコメント