『CSS設計完全ガイド』の著者による「CSS設計のキホンと王道パターン」のまとめ1-1

こんにちは。先日、タイトルのセミナーのアーカイブを視聴したので復習を兼ねて記事を書こうと思います。
実は本自体は読んでいないのですが（汗）、CSS設計はなんとなく理解できているかな〜という状態でした。

そんな状態でも新たに学べたこともあったのでさっそく書いていきます＾＾
ポイントをかいつまんで書きますね。

セミナーの基本情報

まずはせっかくなので、簡単にセミナーの基本情報について。
セミナーはCSSNiteが開催しました！

実は今回をきっかけに知ったのですが、Web制作をしている方にはおすすめだと思いました。
以下、説明文はサイトから抜粋。

ちなみに登壇者は、『CSS設計完全ガイド』の著者である半田 惇志（はんだ・あつし）さんでした。

わかりやすくて勉強になりました＾＾
では、次からセミナーの内容を書いていきます。

セミナーの内容

CSS設計とは

CSS設計とは、”徹底的な役割分担”

ウェブサイトを”長期的に”管理することを目的とした、クラスの作成の仕方や、スタイリングのルールをまとめた方法論。

なぜCSS設計が必要か

1. バグを抑える
2. サイトの寿命を伸ばす
3. サイトの改善スピードを速める

2に関しては個人的になるほど！と思ったのでより詳しく書きます。

◎サイトの寿命を伸ばす

のちにサイトを修正するとなったとき、少しの修正でも何が起こるか分からないということが積み重なると、サイト運用が怖くなりそのうち作り直した方が早いとなってしまう。

サイトの寿命という概念は目から鱗でした・・・。サイトはつくってからが始まりということを再認識しました。

CSS設計の8つのポイント

1. 特性に応じてCSSを分類する
2. HTMLとスタイリングが疎結合である
3. 影響範囲がみだりに広すぎない
4. 特定のコンテキストにみだりに依存していない
5. 詳細度がみだりに高くない
6. クラス名から影響範囲が想像できる
7. クラス名から見た目・機能・役割が想像できる
8. 拡張しやすい

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

コードの役割・責任を明確にし、整理する。整理されたコードはバグを生み出しにくい。

例えば、

• リセットCSSやベーススタイルを「ベースグループ」に
• ヘッダーやフッター、コンテンツエリアを形成するスタイリングを「レイアウトグループ」に
• モジュールに関わるCSSを「モジュールグループ」に

など

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

HTMLの変化の影響を極力うけないようにする。
HTMLは”文書”、CSSは”スタイルシート”　→文書構造とスタイルはなるべく無関係に

ちなみにこの2つの用語はプログラミング等でも出てくるらしいので用語解説載せときますね＾＾
初めて聞きました〜(°_°)

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

影響範囲がみだりに広いコードは改善すら困難な負債となる。
影響範囲の広いCSSに含めるスタイリングはなるべく最小限に留める。

1つのクラスにあれもこれもプロパティを詰めすぎない方がいい、ということですね。

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

どこでも同じ見た目になることが再利用しやすいモジュールの条件。モジュールのベーススタイリングがコンテキストに依存してはいけない。他の場所で使い回しできないのは避ける。

実務で、どこまでモジュールに含めるか悩みだったのですが、このセミナーを聴いて余白はモジュールに含めない方がいい、という結論に至りました。

詳細度が高すぎない

CSSは多くの積み重ねの上に成り立つ。あまりにも高い詳細度は負債のもと。

Sassだと意識していないと詳細度が高くなりがちなので注意！

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

ここを修正するとどうなるかが予測できると、不慮の事故を防げる。

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

クラス名から用途を判別できると、モジュールの誤用が減るだけでなく、開発効率も上がる。

（例）.media .card .page-title .subTitle

拡張しやすい

サイトは公開が「ゴール」ではなく「スタート」。公開後の変更になるべく耐えられるよう、最初から設計しておく。

キリがいいので今日はここまでにしようと思います。

最後に余談として、きいてoh…と思った言葉です( ^ω^ )
「!importを使うとCSSの殴り合いが始まる」（正確には違ったかも・・・）

とにかく、CSSの殴り合いという言葉は壮絶さを物語っていて印象的でしたね・・・

ではさよなら〜〜