『CSS設計完全ガイド』

https://gyazo.com/4d05184af483ae1f5c094d8494345e66

2020/2/27

Chapter 1　CSSの歴史と問題点

1-1　CSSの始まり

CSSの役割と目的

1-2　CSSの問題点

「カオス」になるCSS

CSSはすべてがグローバルスコープ

1-3　複雑化するWeb開発

変更不可能なHTML/CSSと付き合う

増加するページ数

頻繁に変更される「状態」

1-4　解決策として生まれたCSS設計

1-5　CSS設計とデザインシステムとの連携

Chapter 2　CSS設計の基本と実践

2-1　【CSS設計の前に】CSSの基本 詳細度とセレクター

セレクターの種類と，本書における呼称

カスケーディングの基礎

詳細度の基礎

2-2　【CSS設計の前に】リセットCSS

ブラウザのデフォルトスタイル

ハードリセット系CSS

ノーマライズ系CSS

リセットCSSはCSS設計にどのような影響を及ぼすか？

2-3　【CSS設計の前に】英単語を結合する方式の名前

2-4　よいCSS設計が目指す4つのゴール

予測できる

再利用できる

保守できる

拡張できる

2-5　CSS設計の実践と8つのポイント

1. 特性に応じてCSSを分類する

2. HTMLとスタイリングが疎結合である

3. 影響範囲がみだりに広すぎない

4. 特定のコンテキストにみだりに依存していない

5. 詳細度がみだりに高くない

6. クラス名から影響範囲が想像できる

7. クラス名から見た目・機能・役割が想像できる

8. 拡張しやすい

2-6　モジュールの粒度を考える

改めてモジュールとは

モジュールの粒度のばらつきが引き起こす問題

モジュール粒度の指針

2-7　CSS設計の必要性

Chapter 3　さまざまな設計手法

3-1　本Chapterの前提

ストラクチャーとスキンの分離

コンテナとコンテンツの分離

OOCSSのまとめ

ベースルール

レイアウトルール

モジュールルール

ステートルール

テーマルール

SMACSSのまとめ

BEMの基本

Blockの基本

Elementの基本

Modifierの基本

Blockのネスト

Mix

Mixでは対処できない場合

Modifier名は省略してはいけない

BEMのその他の命名規則

BEMのまとめ

3-5　PRECSS

基本的な指針

ベースグループ

レイアウトグループ

モジュールグループ

ヘルパーグループ

ユニークグループ

プログラムグループ

オリジナルグループ

PRECSSのまとめ

Chapter 4　レイアウトの設計

4-1　Chapter 4～Chapter 7のコードの前提

使用するリセットCSS

独自に定義したベーススタイル

使用する設計手法

4-2　本Chapterで扱うサンプル

4-3　ヘッダー

①.header__inner / .ly_header_innerに対するスタイリング

4-4　フッター

①ボーダーの実装方法の違い

ヘッダーの内側とフッターの内側のスタイリングは共通化すべきか？

4-5　コンテンツエリア

1カラム設計

2カラム設計

Chapter 5　CSS設計モジュール集①　最小モジュール

5-1　本Chapter以降のモジュール集の進め方

拡張パターンについて

バリエーションについて

BEMとPRECSSの差違について

5-2　最小モジュールの定義

5-3　ボタン

基本形

拡張パターン

バリエーション

5-4　アイコン付き小ボタン

基本形

拡張パターン

5-5　アイコン

基本形

拡張パターン

バリエーション

5-6　ラベル

基本形

拡張パターン

バリエーション

5-7　見出し

基本形

バリエーション

5-8　注釈

基本形

バリエーション

Chapter 6　CSS設計モジュール集②　複合モジュール

6-1　複合モジュールの定義

6-2　メディア

基本形

拡張パターン

バリエーション

6-3　カード

基本形

拡張パターン

6-4　テーブル（水平）

基本形

拡張パターン

6-5　テーブル（垂直）

基本形

6-6　テーブル（交差）

基本形

6-7　ページャー

基本形

6-8　タブナビゲーション

基本形

6-9　CTA

基本形

6-10　料金表

基本形

バリエーション

6-11　FAQ

基本形

6-12　アコーディオン

基本形

6-13　ジャンボトロン

基本形

6-14　ポストリスト

基本形

6-15　順序なしリスト

基本形

拡張パターン

バリエーション

6-16　順序ありリスト

基本形

バリエーション

Chapter 7　CSS設計モジュール集③　モジュールの再利用

7-1　最小モジュールを利用した複合モジュールの作成

水平ボタンリスト

7-2　最小モジュールと複合モジュールの組み合わせ

ボタン + 画像半分サイズメディア

ボタン + CTAエリア

ラベル + ポストリスト

7-3　複合モジュール同士の組み合わせ

FAQ + リスト

アコーディオン + カード + CTAエリア

Chapter 8　CSS設計をより活かすためのスタイルガイド

8-1　スタイルガイドとは

8-2　なぜスタイルガイドが必要か？

8-3　スタイルガイドを作成する

スタイルガイドジェネレーターを使用する

手動で作成する

8-4　スタイルガイドを作成する方針のまとめ

Chapter 9　CSS開発に役立つその他の技術

9-1　CSS開発を効率化する，ミスを減らす

Sass

Browsersync

Autoprefixer

9-2　人による差異をなくす

CSScomb

EditorConfig

Prettier

9-3　リファクタリングのヒントを得る

Stylelint

CSS Stats

9-4　CSSを軽量化する

CSS MQPacker

cssnano

9-5　HTML開発を効率化する

Nunjucks

EJS

Pug

9-6　開発にまつわるタスクを自動処理する

Prepros

Gulp

webpack