中級者への第一歩! 変化に強い css を書こう

対象読者

本記事が対象とするのは、html と css の基本を習得し、web ページをある程度作れるようになってきたフロントエンド初心者エンジニアです。ある程度経験を積んだ方であれば、目新しい内容は無いでしょう。

変化に強いとはなにか

本記事では、変化に強い css を「html を変更してもデザインが崩れにくい css」と定義します。

なぜ変化に強いほうが良いのか

たとえば、Ruby on Rails を使用してアプリケーションを作成するとき、使用しているライブラリ等の制約によって html をある程度強制されることがあります。このとき、もし css が変化に弱いと、div タグを一つ追加しただけでデザインが崩れてしまい、css まで修正しなければなりません。

変化に強い css を書く方法

変化に弱い css

まずは以下の html と css を読んでみてください

<h1>КАТЮША дневник</h1>
<div class="articles">
  <div>
    <h2>oo.xx</h2>
    <p>Выходила на берег Катюша, На высокий берег, на крутой.</p>
  </div>
  <div>
    <h2>oo.xx</h2>
    <p>Выходила, песню заводила Про степного, сизого орла.</p>
  </div>
</div>

h1 {
  border-bottom: solid 1px #000;
}

.articles div {
  border: solid 1px #000;
  margin: 32px 0;
  padding: 8px 4px;
}
.articles h2 {
  margin: 0;
}

とくに何の変哲もないコードです。しかし、最高のコードとはいえません。まずは html からリファクタリングしていきましょう。

html をみると、div を多用していることがわかります。div を使用することは間違いではありませんが、この場合は article タグを使用することが出来そうです。置き換えてみましょう。

<h1>КАТЮША дневник</h1>
<div class="articles">
  <article>
    <h2>oo.xx</h2>
    <p>Выходила на берег Катюша, На высокий берег, на крутой.</p>
  </article>
  <article>
    <h2>oo.xx</h2>
    <p>Выходила, песню заводила Про степного, сизого орла.</p>
  </article>
</div>

タグを少し変更しただけなのに、見た目が変わってしまいました。

これは誰にでも経験があることでしょう。しかし、非常に恐ろしいことでもあります。html ほんの少し変更するだけでも、デザインが崩れてしまうかもしれないのですから。

変化に強くする

この問題を解決するのは簡単です。css でクラス以外のセレクタを使用しなければよいのです。html の中に class を css のための目印として埋め込み、css は class 以外の情報を一切使用しない。そうすることで、html を変更しても、class さえ変更しなければ見た目を維持することが出来ます。

このルールを先程の例に適用してみましょう

<h1 class="title">КАТЮША дневник</h1>
<div class="articles">
  <div class="article">
    <h2 class="article-title">oo.xx</h2>
    <p>Выходила на берег Катюша, На высокий берег, на крутой.</p>
  </div>
  <div class="article">
    <h2 class="article-title">oo.xx</h2>
    <p>Выходила, песню заводила Про степного, сизого орла.</p>
  </div>
</div>

.title {
  border-bottom: solid 1px #000;
}

.articles .article {
  border: solid 1px #000;
  margin: 32px 0;
  padding: 8px 4px;
}
.articles .article-title {
  margin: 0;
}

そして、先ほどと同じように div を article に変更します。

<h1 class="title">КАТЮША дневник</h1>
<div class="articles">
  <article class="article">
    <h2 class="article-title">oo.xx</h2>
    <p>Выходила на берег Катюша, На высокий берег, на крутой.</p>
  </article>
  <article class="article">
    <h2 class="article-title">oo.xx</h2>
    <p>Выходила, песню заводила Про степного, сизого орла.</p>
  </article>
</div>

.title {
  border-bottom: solid 1px #000;
}

.articles .article {
  border: solid 1px #000;
  margin: 32px 0;
  padding: 8px 4px;
}
.articles .article-title {
  margin: 0;
}

このように、見た目はほぼ変化していません。

まとめ

本記事では、変化に強い css について簡単に述べました。しかし、本記事の内容はごく基本的なものであり、決してこれが最善の方法ではありません。

本記事で扱ったことを身につけた方は、次のステップとして、BEM, SMACSS, FLOCSS などの、より実践的な css の設計手法について学ぶと良いのではないでしょうか。