【CSS設計】中規模サイトへの道、その2

【目次】中規模サイトへの道

• その１　全体ガイダンスと、チャプター１について（リンク）
• その２　実例をコーディングと、チャプター２について（現在位置）
• その３　脱初心者の気づきと、チャプター３について（未制作）
• and more…

参考文献は、『CSS設計完全ガイド』

チャプター１では、CSS設計の思想について学習

前回の記事でも書きましたが、チャプター１ではCSS設計の基礎となるデザイン概念について学びました。アトミックデザインから、原子、分子のように、少しずつ粒度が高くなっていく構成について学びました。

チャプター２では、実際にコードを修正する

ある程度の基礎知識をインプットした後に、よくないCSSコーディングの例が示されます。htmlでは、一見それほど不具合はなさそうに見えます。私も最初に見た時は、<span>と<div>がそのまま使われているところに違和感を感じただけだったと思います。

この例として示されたコードを８つのルールに従って、修正を実際に加えていく作業ができます。８つのルールも文字だけを見ると、少し複雑そうに見えますが、実際に修正する手間はほんの数秒で終わります。

これは、コードを書くことが簡単なCSSが脆く壊れやすいということを、参考書内で何度も言われていることですが、数秒でリファクタリングが可能ということは、リファクタリングそのものは簡単でも、そのコードの記述方法と基本にあるルールを理解することは難しいことであるとも言えるかもしれません。

指示通りに修正することは誰でもできる簡単な作業であり、そのルールを構築したり設計することが仕事として求められている箇所なのかなと思いながら学習を進めました。

CSS設計の８つのルール

このルールが最重要だと感じています。このルールを一目見て、全て理解できる人は提示した参考書を読む必要は無いのかと思います。私はある程度ルールの意味はわかるけれど、どのように修正していくのか、具体的な方法が全く想像できない状態でした。

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

これらに基づいて修正の練習をした実際のコードをGithubにアップしてみました。参考までにどうぞ（リンク）ちなみに、Gitも初心者なので不具合が多いと思います。今後の課題です。

CSS設計の４つのゴール

こうして設計されたCSSは４つのゴールにたどり着くのが良いCSS設計とされていましたので書き記しておきます。参考書でも紹介されていますが、Philip Walton氏のブログで詳しく書かれている内容だそうです。

• 予測できる
• 再利用できる
• 保守できる
• 拡張できる

まさに自分のCSSを見ていて、できていないことだらけでしたので、練習を重ねて少しでもこの４つのゴールに近づけられるようにします。また平行してGithubの扱い方も学習しチームでWeb制作する基礎を磨いていきます。

このブログも自身がCSS設計したものですが、ブログを更新するたびにCSSの穴が見つかり、修正しようと考えCSSを開いてみると、予測できず、再利用できず、拡張できないため、修正作業に膨大な時間が必要と予想され、なかなか修正できていません。

身をもってCSS設計の重要さを感じ、もっと早くから参考書を読んでおくべきだったと考えて居ます。

引き続き、チャプターを読み進めて学習ログを残していく予定です。