【書評】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章あたりからあやしくなる。

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

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

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

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA