Web制作者のためのCSS設計の教科書【書籍紹介】コンポーネント設計など

書籍について

ウェブ制作でCSSを書いていると、CSSの記述量がどんどん膨らんでいって、自分でも何処に何を書いたか分からなくなることがよくありました。

そんなときに勉強になるのが、書籍『Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法』。  

書籍ではCSSの基本から、コンポーネント設計の考え方を用いたCSSの記述、CSSプリプロセッサを用いた管理方法などが学べます。

特にコンポーネント設計の考え方を用いたCSSの記述方法は、豊富な事例をまじえながら解説があります。CSSでのコンポーネントとは以下のように記載されています。

CSSのルールセットを取り換えの利く部品＝コンポーネントにすることを意味します

このようにCSSでコンポーネント設計を意識することによって、CSSの再利用性や保守性が高まります。

この書籍を読めば、今までごちゃごちゃになっていたCSSがこの書籍を読めば、すっきりするかも。

書籍の目次

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

「ちゃんとCSSを書く」ためのプロの考え方を徹底解説

• Amazon
• 楽天市場
• Yahoo!

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

   1. 1-1 CSS設計の重要性
   2. 1-2 破綻しやすいCSS

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

   1. 2-1 CSSセレクタと詳細度
   2. 2-2 セレクタのリファクタリング

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

   1. 3-1 CSSにおけるコンポーネント設計
   2. 3-2 OOCSS
   3. 3-3 SMACSS
   4. 3-4 BEM
   5. 3-5 MCSS
   6. 3-6 FLOCSS

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

   1. 4-1 コンポーネントをどのように作るか
   2. 4-2 よくあるコンポーネントの設計・実装パターン

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

   1. 5-1 コンポーネントを個別に管理する

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

   1. 6-1 コンポーネントの運用
   2. 6-2 スタイルガイドの作成方法

7. 第7章 Web Componentsの可能性

   1. 7-1 HTML/CSSのコンポーネント化
   2. 7-2 独自のコンポーネントを作る