CSSの設計

Webサイト構築の大まかなワークフロー

企画・立案
案件定義
Webサイト設計
画面デザイン
マークアップ・CSS設計
JavaScript開発
ページ量産
システム開発
公開

マークアップ前に考慮すべきこと

ページレイアウトのパターンはいくつそんざいするのか
コンテンツ内にどのような要素が配置されるのか
ウェブデザインの手法はレスポンシブWebデザインなのか、アダプティブWebデザインなのか
そのWebサイトの性質は、ECサイトなのか、コーポレートサイトなのか、ポータルサイトなのか、それ以外なのか
Webサイトを公開した後は誰が運用をしていくのか
CMSやシステムが入るのか
推奨環境・端末は何になるのか
外部サービスとの連携はあるのか
ユーザ層のターゲットはどのあたりか

保守性

モジュールの疎結合を考慮し、特定のページや場所、構造に依存せず制作の効率化や保守性を保つことが出来る仕組みを整える。

拡張性

基本的な内部構造に影響を与えずに、モジュールの機能を変更したり拡張できるようにすること。
モジュールを実装する上で、既存のモジュールを元にサイズ、色などが違った、別の派生モジュールを簡単に増やせるような設計を心がけると良い。

再利用性

再利用可能な部品としてモジュールを設計することができれば、同じようなHTML,CSSのコードを書く必要がなくなり、制作や運用の効率化に繋がる。また、デザインに一貫性を保つことができ、ユーザビリティの向上にも繋がる。

CSSの破綻理由を考える

CSSには柔軟性がある一方で、スコープのコントロールやカプセル化といった概念を実装できるプログラム的な機能がない。
曖昧性や理解に苦しむ表現が多用されると、コードに一貫性がなくなり、破綻を生む。
言語に足りない機能に関しては、コーディング規約やガイドラインを定めドキュメントにするのがよい。
また、pやh1のような要素への直接のスタイル定義はできるだけ、避けてクラスを定義した上で、クラスセレクタにスタイルを定義するように心がける。

Webデザインのスタイルガイドの作り方 | UX MILK

スコープ

ある変数や関数などが特定の名前で参照される有効範囲のこと。変数や関数が使える範囲、影響する範囲をコントロールすることにより、保守性の高いプログラムを書くことが出来る。

カプセル化

オブジェクト指向プログラミングが持つ特徴の一つ。何かしらのデータや結果を返す処理の内部構造を外部から遮断し、機能を独立させるという考え方。

基本形

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>サイトタイトル</title>
  </head>
  <body>
  </body>
</html>

スタイルシートの読み込み

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>スタイルシート読み込みバージョン</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
  </body>
</html>

コンテンツ・サイドバーを追加

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>スタイルシート読み込みバージョン</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header class="header">
    </header>
    <div class="wrapper">
      <main class="main">
      </main>
      <div class="sidemenu">
      </div>
    </div>
    <footer class="footer">
    </footer>
  </body>
</html>

豆知識

接頭辞

ヘッダーやフッター、メインコンテンツやサイドバーなどには、レイアウトカテゴリを用いる事がある。上記のように比較的大枠のスタイルにID属性を付与する慣習があり、明示的にl-という接頭辞を付与する。
レイアウトではなく、モジュールの場合は、m-やmod-を付けても良い。
常態を表すスタイルはisをつける。例： is-hidden is-active
- JavaScriptで変化するスタイルに定義するため、複雑化するルールセットを上書くと同時に、同時に２つの常態が競合することは考えられないので、!importantを使用しても良い。

参考：
はじめてのCSS設計
HTML5/CSS3モダンコーディング

フロントエンドのいろは