『Web制作者のためのCSS設計の教科書』
https://gyazo.com/200cc683b5e8b257af59e32105f1fce4
インプレス
第1章 CSSにおける設計とは
フロントエンドとCSSの仕事
開発に欠かせない設計
より良いCSSのゴール
1-2 破綻しやすいCSS
HTMLの構造に依存している
スタイルを取り消している
絶対値を多用している
修正しやすいCSSへ
モダンなサイト構築ワークフロー
第2章 CSSの基本を振り返る
カスケーディングの基本
詳細度
詳細度の計算
2-2 セレクタのリファクタリング
セレクタをより安全でシンプルなものに
要素セレクタを省略する
セレクタを短くする
セレクタを限定的にする
クラスセレクタを活用する
第3章 コンポーネント設計のアイデア
コンポーネントとは
OOCSSの原則
構造と見た目の分離
コンテナーとコンテンツを分離
カテゴライズ
命名規則
MindBEMding
マルチレイヤーCSS
MCSSのレイヤー
自分の設計手法を考える
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の仕様
7-2 独自のコンポーネントを作る
モデルとなるコンポーネント
my-alert要素を作る
ライフサイクルコールバック
TemplatesとShadow DOM
機能追加とスタイリング
コンポーネント開発の時代に備えて
正誤
52ページ CSSのコード(6行目)
100ページ 本文4~5行目
111ページ 111ページのCSSの1行目
115ページ アイコンフォント実装例のCSSの3行目
137ページ グリッド実装例のCSSの1行目〜9行目