【CSS設計】BEMを使った破綻しにくいHTML, CSSの書き方

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

おためし受講中
  • 授業で使用する教材

    教材はありません

「授業フィードバック」で、授業の感想を教えてください!

チュートリアルは、こちらの「その他のオプション」からいつでも確認いただけます。

コピーしました!

ここには授業中のやりとりが表示されます

生放送でのコメントが再生されています

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    全2回 2015年8月21日公開
    【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まで

    受講生代表

    • 廣松 あすか

      廣松 あすか

      スクー放送部

    教室画面の機能をご紹介します

    学習機能を活用して、効率よく学習しましょう!