複数サイトデザインを共通化するならCSSでなくHTMLでやる方が楽だった

サイト作成の共通化作業

複数サイトを作ると「このコード前も書いたな」ということが増えてきます。ここを共通化すると作業がスピードアップできるので、効率化を考えても「DRY(Do not Repeat Yourself)」を徹底したいところです。

HTMLを共通化する場合

HTMLを共通化して、CSSのみでデザインを変更するパターン。CSSだけでもかなりの変更ができるので、ベーシックなブログなどならこれでもいけます。

例えば、

<ul class="some__list">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
</ul>

こんな一覧があったとして、CSSで「some__list」を定義するだけで、いろんな種類のデザインが適用できます。

CSSを共通化する場合

先ほどのパターンの逆で、CSSは極力触らないでHTML側でCSSを適用するパターン。

<ul class="border__bold list__inline">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
</ul>

こんな感じで、よく使うスタイルをCSSに登録しておいて、HTML側でデザインを操作するイメージ。オレオレBootstrapを用意する感じですね。

CSSを共通化したほうがよかった理由

若干宗教論議的になってしまいますが、自分的には「CSSを共通化してHTMLでデザイン適用する」方が作業コストが低かったです。

理由1: CSSのみでやるとHTML要素のネストが深くなる

例えば、ヘッダー画像部分を作るとして、

<div class="entry-header">
  <h1>タイトル</h1>
  <p>説明文</p>
</div>

背景カラーを設定するだけくらいならこれいいのですが、「横幅いっぱい背景はグレーで、コンテンツの中身は、背景は白で1080pxでセンタリング」とすると、どうしてもCSSだけでは表現ができず、HTMLのネストが必要になります。

<div class="entry-header">
  <div class="entry-header__inner">
    <h1>タイトル</h1>
    <p>説明文</p>
  </div>
</div>

これくらいならいいのですが、「CSSだけでなんでも対応できるようにする」とすると、全てにラッパーとインナーを用意しておかないと、将来的に「CSSだけデザインを適用する」という構想が破綻します。

イメージすると、こんな感じです。

<div class="entry-header">
  <div class="entry-header__inner">
    <div class="entry-title">
      <h1>タイトル</h1>      
    </div>
    <div class="entry-meta">
      <div class="entry-description">
        <p>説明文</p>
      </div>
    </div>
  </div>
</div>

CSSのみでなんでも対応しようとすると「使わないかもしれない要素」まで準備しておかないといけません。ネストが深いので、CSSのセレクタ宣言も長くなります。

HTML要素のネストが深くなると、ブラウザのDOMレンダリングが重くなるので、SEO的にもマイナスです。

理由2: CSSのみでやるとクラス名が異常に増える

CSSの良いところは「一つのクラスでデザインを使いまわせる」というところですが、CSSだけで操作しようとすると、「一つのクラスデザインで全体を崩す」ことが多くなります。

例えば、先ほどのリストで考えると、

<ul class="header__menu some__list">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
</ul>

<ul class="footer__menu some__list">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
</ul>

上記は、同じリストでヘッダとフッターにリンクを貼るイメージですが、どちらもデザインが共通化されることはほぼないでしょう。となると、CSSで共通化はできないので、ユニークなクラスを付与することになります。

つまりCSSの「一つのクラスでデザインを使いまわせる」というメリットが生きないばかりか、大多数の要素に独自のクラスを付与することになるので、クラス名が増えます。

クラス名が増えると「あれ？ここのスタイルさっきと同じだな」というコードが増えます。そこで共通スタイルを適用しようとすると、個別のスタイルを変更したい時に共通スタイルが邪魔になります。

理由3: CSSのみでやると文章構造が変えられない

地味に、理由としてはこれが一番でかいかもしれません。

例えば、サイト全体のレイアウトとして、

1カラム
2カラム（左サブカラム）
2カラム（右サブカラム）

というのがメジャーですが、これくらいなら、

<div class="wrapper">
  <div class="main">
    <h1>タイトル</h1>
    <p>説明文</p>
    <div class="content">
      <p>本文本文本文本文本文本文</p>
    </div>
  </div>
  <div class="sub">
    <h2>新着記事</h2>
    <ul class="some__list">
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
      <li>リスト4</li>
    </ul>
  </div>
</div>

というHTMLフレームがあれば、CSSのみでも対応できます。

しかし、「2カラム（右サブカラム）、ただし記事のタイトルヘッダだけ横幅いっぱい」というレイアウトを作ろうとすると、2カラム（左サブカラム）と同じHTML構造でやるのは無理があります。

「記事のタイトルヘッダ」は左右レイアウトを定義する.wrapperの中にあるので、どうしても「ただし記事のタイトルヘッダだけ横幅いっぱい」が表現できません。

これに対応しようとすると、先ほどの「理由1: CSSのみでやるとHTML要素のネストが深くなる」の問題にぶち当たります。

さらに、「3カラム構成にしたい」となったら、基本的にはHTML構造を変えないときついでしょう。

理由4: CSSはSEOには影響が少ない

ユーザービリティという意味ではCSSでのデザイン定義は重要ですが、「WebページはあくまでHTML文書」なので、文章が一番大事です。

SEO的にも検索エンジンが評価しているので、ページの文章（やリンク）であって、装飾要素であるCSSは「最低限のユーザービリティ（スマホ対応や文字サイズなど）を評価している」にすぎません。

一番大事なHTML文書を犠牲にして不自由にしてまで「CSSのみでデザインを変更する」というのは本末転倒ではないでしょうか？

まずは、しっかりと「文章としてのHTML」を組み込んで、そこに装飾を加える方がSEO的には大事な気がします。

複数サイトデザインを共通化するならCSSでなくHTMLでやる方が楽という話でした。

実は、筆者は「HTMLは固定でCSSのみで複数サイトのデザインする」というのをここ1年くらいトライしていたのですが、サイトごとに文章構造もレイアウトもバラバラなので共通化なんて無理でした。

それよりも、汎用的な（Bootstrap的な）オレオレCSSフレームを書いておいて、文章構造に合わせてクラスを付与する方が柔軟性があって、SEOにも強いサイトになると思います。

目次