Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

【本を読んだ感想】Web制作者のためのCSS設計の教科書

エンジニアになって1〜2ヶ月目くらいの時に、この本を読んだ時の感想です。

エンジニアとして就職しようとしているなら、この本を読んだ方が良いかもしれない。

就職前に読んだ方が良いと思う。

CSSを全く使わないのであれば、読む必要はないと思うけど・・・。

 

 

エンジニアとして就職すると人のコードを見る機会があって、

今まで、独学で勉強していた教科書にあるコードの書き方とは、

違う書き方というものに出会う。

 

この本には、

「ドットインストール」や「初心者用の教科書」では、

知ることのできないCSSの書き方や知識が書かれている。

 

内容をあまり理解できていないので、

うまく説明できないんだけど、

この本を読むことによってCSSの書き方が変わる。

コードの書き方が綺麗になる。

Web制作者のためのCSS設計の教科書の目次

この本読んだけど、前半部分は多少理解できたけど、

後半からあんまりよくわからなくなった。

 

自分の業務に関わるか怪しい部分は全く頭に入ってこなかったけど、

おそらく読んだ方が良い本だ。

コードの書き方は変わる。

 

半分も内容を理解することができなかったので、

とりあえず、どんな内容が書かれているのか、目次だけは書いておこうと思った。

こんなことが書かれています。

 

第1章 CSSにおける設計とは

1-1 CSS設計の重要性
　フロントエンドとCSSの仕事
　開発に欠かせない設計
　より良いCSSのゴール
1-2 破綻しやすいCSS
　HTMLの構造に依存している
　スタイルを取り消している
　絶対値を多用している
　修正しやすいCSSへ
　モダンなサイト構築ワークフロー

第2章 CSSの基本を振り返る

2-1 CSSセレクタと詳細度
　カスケーディングの基本
　詳細度
　詳細度の計算
2-2 セレクタのリファクタリング
　セレクタをより安全でシンプルなものに
　要素セレクタを省略する
　セレクタを短くする
　セレクタを限定的にする
　クラスセレクタを活用する

第3章 コンポーネント設計のアイデア

3-1 CSSにおけるコンポーネント設計
　コンポーネントとは
3-2 OOCSS
　OOCSSの原則
　構造と見た目の分離
　コンテナーとコンテンツを分離
3-3 SMACSS
　カテゴライズ
　命名規則
3-4 BEM
　MindBEMding
3-5 MCSS
　マルチレイヤーCSS
　MCSSのレイヤー
3-6 FLOCSS
　自分の設計手法を考える
　FLOCSSの構成
　基本原則
　Foundation
　Layout
　Object
　命名規則
　カスケーディング

第4章 コンポーネント設計の実践

4-1 コンポーネントをどのように作るか
　最適化を焦らない
　Rule of three
　SOLID CSS
4-2 よくあるコンポーネントの設計・実装パターン
　ボタン
　アイコン
　見出し
　メディア
　ナビゲーション
　リスト
　グリッド
　汎用クラス

第5章 CSSプリプロセッサを用いた設計と管理

5-1 コンポーネントを個別に管理する
　Sassを使った管理方法
　マルチクラスとシングルクラス
　セマンティックなクラス名
　Sassの注意点

第6章 コンポーネントの運用に必要なツール

6-1 コンポーネントの運用
　CSSのコメント
　ドキュメンテーション
　スタイルガイド、パターンライブラリ
6-2 スタイルガイドの作成方法
　スタイルガイドのテンプレート
　スタイルガイドジェネレータ
　ワークフローを見直す
　CSS開発・設計に役立つツール

第7章 Web Componentsの可能性

7-1 HTML/CSSのコンポーネント化
　現状のHTML/CSSにおける限界
　Web Componentsとは
　Web Componentsの仕様
7-2 独自のコンポーネントを作る
　モデルとなるコンポーネント
　my-alert要素を作る
　ライフサイクルコールバック
　TemplatesとShadow DOM
　機能追加とスタイリング
　コンポーネント開発の時代に備えて

 

 

第1章と2章まではついていくことができたが、

第3章あたりからあやしくなる。

後半になればなるほど、頭に入らなくなったが、

また読み返すことで、理解してけば良いのかなぁと個人的に思っている。

気になった方は読んでみてください。