第1回｜【CSS設計】BEMを使った破綻しにくいHTML, CSSの書き方 -前編-

CSS設計方法論の1つである「BEM」について、徹底的に解説します！
（今回は全2回ある内の1回目の授業です）

◆「BEMとかCSS設計なんて知ってるよ！」という方もぜひ

BEMは数あるアプローチの中でも、何かと誤解が多かったり使いどころが難しい方法論です。

・SMACSSなど、他のルールと併用しようとしてカオスなことになってませんか…？
・命名ルール（Block__Element_modifier(key_value)）を正確に理解していますか…？
・実際の開発でBEMを使うメリット、デメリットについて把握していますか…？

今回の授業ではこうした疑問を解消してまいります！

◆「BEM？なにそれ美味しいの？」という方もぜひ

BEMの知識を身につけておくことで「長期にわたって破綻しないHTML,CSS」を書くことができます！
このスキルを使ってコーディングすることで…

・CSSを一箇所ちょっと修正したつもりが、意図しない部分にまで影響してしまった
・クラス名が思いつかなかったり、開発者間で付け方が違ったりしてカオスになる
・無駄な記述をしてしまい、CSSがどんどん膨れ上がってくる

などのトラブルを回避することが期待できます！

また、BEMをはじめとする設計を考慮したコーディングスキルは、現場で大変必要とされているスキルです。
今や設計ができないと、大規模で複雑なWebサイトやアプリケーションはコーディングできません！

◆この授業を受けるにあたって必要な知識

・HTML,5 CSS3の基礎（必須）
・OOCSSなどのCSS設計についてのざっくりした知識（推奨）

◆後編までの宿題

+ ひな形のデータ「homework」(http://bit.ly/1hr20P9)内のファイルに沿って以下3つをBEMでマークアップし、zipにしてメールで送ってください
1. ナビゲーション
2. カード
3. ボタン

+ できるとこまででOKです

+ 送り先：kadai@schoo.jp

+ 件名：【課題提出】BEMを使った破綻しにくいHTML, CSSの書き方

+ 本文：とくになし（質問とかあれば書いて頂いても構いません）

+ 締切：9/4 23:59まで