本書では、
- CSS設計の知識を吸収し，フロントエンドエンジニアにステップアップしたいひと
- 向上心が強く，CSS設計について理解を深めたい初級フロントエンドエンジニア
- 会社としてCSSのルールを策定したいチームリーダー等の責任者
をターゲットととし、
を学べる。
以下から正誤表やサンプルコード、参考記事が参照できる。
本記事では、本書のざっくりとした紹介・学べたことを記載する。
きっかけは「CSSフレームワークに依存しない手法を学ぶため」
今まで携わってきた開発では、BootstrapやMaterializeのようなCSSフレームワークを使ってきた。だが、求めているUIにしたい場合、CSSフレームワークに定義されているスタイルをそのまま適用するとはいかず、独自のCSSの定義 or CSSフレームワークのスタイルをラッパーするといった手法が取られてきた。
後者*1の場合、CSSフレームワークがアップデート（クラス名が変更）されたことにより、スタイルが大きく崩れたことも発生したことがある。
このような体験から「フレームワークに依存しないCSS設計」を学習、設計の選択肢を増やすため、本書を手に取った。
本書に触れる
本書を読み始めた目的や参考になったポイントを記載する。
リセットCSSの種類
ブラウザによって独自に定義されているスタイルの誤差をなくすのがリセットCSS。ただ、そのリセットCSSにも以下のような種類があることを理解した。
| 名称 | 概要 | 例 |
|---|---|---|
| ハードリセット系 | ブラウザ間の差分をなくす | HTML5 Reset Stylesheet | HTML5 Doctor |
| ノーマライズ系 | ブラウザの良い部分を残し、その他差分をなくす | Normalize.css: Make browsers render all elements more consistently. |
どのような見た目になるかは、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設計手法の紹介と実践
目から鱗だったのは以下。
- CSS設計手法（BEM、PRECSS等）が必要となった経緯
- BEM、PRECSS - Manage your CSS with prefixes.等の紹介
- BEM、PRECSSを用いた「カード、ラベル、ボタン、etc...」のレシピとその設計指針
PRECSSは、BEMやGoogle HTML/CSS Style GuideをベースしたCSS設計手法。
公式サイトは日本語対応、サンプルコードも記載されている。BEMやPRECSSのような設計手法を学んだこなかった方は、ぜひ以下だけでも一読してほしい。
まとめ
本書から学習したことと、身につけるためのトライを記載する。
学んだこと
実践すること
CSSフレームワークを使用せず、以下のような成果物を作ること。
- Gridsomeを用いたブログ
- 以下記事に記載されている課題
