オトナのCSS設計入門 - ハンズオン資料

Trial: 01 - 要素セレクタ依存を無くそう

 

ソースコード(Forkして編集してください)


「章」のデザインを繰り返したHTMLがあります。
しかし、要素セレクタ( div, h1, p などのHTMLタグ )に依存したCSS設計になっているようです。

FLOCSSを使ってこの問題を解決してみましょう!

ヒント

  • 各章(Chapter)をどのレイヤーとして捉えるかは自由です(部品としての抽象度を考えると、今回は「Project」レイヤーとして捉えるのがよいでしょう)。
  • MindBEMdingの命名規則(.xxx__yyy—zzz)を上手く活用しましょう。



Trial: 02 - 見出しのデザインをモジュール化しよう

 

ソースコード


複数の見出しをCSSで定義したHTMLがあります。
しかし、種類を増していくほど拡張性の無いCSS設計になってしまいました。

SMACSSを使ってこの問題を解決してみましょう!

ヒント

  • Moduleのプリフィクスは「m-」ですが、付けなくても構いません。



Trial: 03 - オトナのページを設計し直そう

 

ソースコード


オトナのプログラミング勉強会のページがあります。素敵なページですね。
しかし、どうやらCSS設計がされていない残念なページのようです(制作者の苦情は受け付けない)。

自由なCSSコンポーネント設計で、この問題を解決してみましょう!
(今日紹介したSMACSSやBEM、FLOCSSからお好きなものを選んでください)

ヒント

  • 今回は無しだよ!
  • 回答例ではFLOCSSを使用しています。