本書では、
- CSS設計の知識を吸収し,フロントエンドエンジニアにステップアップしたいひと
- 向上心が強く,CSS設計について理解を深めたい初級フロントエンドエンジニア
- 会社としてCSSのルールを策定したいチームリーダー等の責任者
をターゲットととし、
- CSSにおけるレイアウト、モディファイアといった種類の紹介
- BEMやPRECSSなどのCSS設計手法の紹介と実践
- 「カード、ラベル、ボタン」のような定番レイアウトの設計手法
を学べる。
以下から正誤表やサンプルコード、参考記事が参照できる。
本記事では、本書のざっくりとした紹介・学べたことを記載する。
今まで携わってきた開発では、BootstrapやMaterializeのようなCSSフレームワークを使ってきた。だが、求めているUIにしたい場合、CSSフレームワークに定義されているスタイルをそのまま適用するとはいかず、独自のCSSの定義 or CSSフレームワークのスタイルをラッパーするといった手法が取られてきた。
後者*1の場合、CSSフレームワークがアップデート(クラス名が変更)されたことにより、スタイルが大きく崩れたことも発生したことがある。
このような体験から「フレームワークに依存しないCSS設計」を学習、設計の選択肢を増やすため、本書を手に取った。
本書に触れる
本書を読み始めた目的や参考になったポイントを記載する。
リセットCSSの種類
ブラウザによって独自に定義されているスタイルの誤差をなくすのがリセットCSS。ただ、そのリセットCSSにも以下のような種類があることを理解した。
どのような見た目になるかは、w3schools - CSS Layout Flexbox に対し、各代表的なリセットCSSが適用した以下デモを確認してほしい。
適用なし
See the Pen
CSS Layout Flexbox - Normal by zucky (@zucky_zakizaki)
on CodePen.
ハードリセット系 適用
See the Pen
CSS Layout Flexbox - Hard Reset Css by zucky (@zucky_zakizaki)
on CodePen.
See the Pen
CSS Layout Flexbox - Normalize Css by zucky (@zucky_zakizaki)
on CodePen.
PRECSSなどのCSS設計手法の紹介と実践
目から鱗だったのは以下。
PRECSSは、BEMやGoogle HTML/CSS Style GuideをベースしたCSS設計手法。
公式サイトは日本語対応、サンプルコードも記載されている。BEMやPRECSSのような設計手法を学んだこなかった方は、ぜひ以下だけでも一読してほしい。
まとめ
本書から学習したことと、身につけるためのトライを記載する。
学んだこと
- リセットCSSの存在と活用方法
- BEM、PRECSSなどのCSS設計手法
- 「カード、ラベル、ボタン」等の設計指針
実践すること
CSSフレームワークを使用せず、以下のような成果物を作ること。
- Gridsomeを用いたブログ
- 以下記事に記載されている課題