俺の食べログ

「グルメ」「仕事」「プログラミング」「趣味」について書いてます。

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

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

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

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

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