コーディングに慣れてきたら意識して欲しい「保守運用」を意識したマークアップ

マークアップにおいて、カンプ通りのコーディングはあくまでスタートラインに過ぎず、本番は保守運用を見越したコーディングにあります。

保守運用を見越したコーディングが出来ないと、保守運用フェーズで問題が発生することはもちろん、大規模サイトにおいては開発段階で様々な問題が発生する可能性があります。

今回は、保守運用を見越したコーディングの基本の基本に関して、WEBサイトを制作するという想定で簡単にご紹介したいと思います。

ディレクトリ構造

制作するサイトのディレクトリ構造は上のようになっているとします。

共通の物に関してはcommonディレクトリ内のcommon.cssに記述し、ページ毎の物に関しては各階層のcssディレクトリ内に記述するルールになっています。

色々なページに出てくるパーツは共通CSSに書こう！

では、まずトップページのカンプが届いたので、トップページをコーディングすることにしました。

そこで、トップページのカンプ内に下のようなボタンが出てきました。

この場合、次のようにコーディングするかと思います。

「html/index.html」

<a href="detail.html" class="btn01">詳しくはこちら</a>

「html/css/index.css」

.btn01 {
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 5px;
  background: #2980b9;
}

問題ありませんね。

さて、トップページのコーディングが終わると次はアバウトページのカンプが届き、アバウトページのカンプにも次のようなボタンが出てきました。

そこでトップページで同じボタンを見たので、トップページのCSSをコピペして使うことにしました。

「html/about/index.html」

<a href="detail.html" class="btn01">お問い合わせはこちら</a>

「html/about/css/index.css」

.btn01 {
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 5px;
  background: #2980b9;
}

ちょっと雲行きが怪しくなってきましたがまだ問題ではありません。

次にお問い合わせページのカンプが届き、お問い合わせページにも次のようなボタンがありました。

ここでアバウトページのようにコピペをやろうとすると流石に問題になってきます。

何が問題か

例えば、コーディングしている最中「ボタンの角丸を消すことになりました！」なんてことになったとします。

そうなると

• トップページのCSS
• アバウトページのCSS
• お問い合わせページのCSS

と、同じ形のボタンを修正するのに複数のファイルを弄る必要が出てしまいます。

現状はファイルが３つなのでまだそこまで時間がかかりませんが、大規模サイトとかだと数十ファイル修正しないといけないなんてことも有り得てしまい、時間がかかりますしケアレスミスが発生してしまう可能性も高まります。

共通化出来る箇所は、やり過ぎない範囲で共通化する。というのが原則になってきます。

どうすればいいか

複数ページに渡って出てくる物に関しては、共通CSS（今回の場合は「html/common/css/common.css」）に記述しましょう。共通CSSに記述しておけば、修正に強いだけでなく、別のページで再登場した際にいちちコピペする必要もなくなり開発スピードもあがります。

今回のように、「実際にカンプが届かないとこのボタンが複数ページに渡って出てくるのかわからない」なんてことは良くあります。その場合は最初は各ページのCSSファイルに書いておいて、実際カンプが届いて複数ページに渡って出てくることがわかった時点で共通CSSに書き直す、ということをやるべきです。出来上がったページのCSSを触ることを怖がらず、先を見越して問題になりそうな箇所は積極的に直していきましょう。

共通CSSに書くスタイルは出来るだけ接頭語をつけよう

先ほどcommon.cssに共通パーツ「.btn01」を記述しましたが、まだ少し問題があります。

何かというと、「.btn01」はよく使うネーミングなので、他のメンバーがcommon.cssで使われていることを知らずにコーディングに「.btn01」の名前を使ってしまい、ブラウザで見ておかしいことに気づいて修正に時間をとってしまう、という問題が発生する可能性が高いのです。

共通CSSは全ページで読み込まれる物なので、名前に関しては非常に気を使わないといけません。

そこでおすすめなのが、「接頭語」をつけることです。

私がよくやるのが、共通CSSに共通パーツを書く場合、接頭語として「mod」をつけることです。（「mod」は「module（モジュール）」の略です。）

例えば今回の場合は、

.modBtn01 {
  ~
}

となります。

「共通パーツにはmodを接頭語として付ける」というルールを作り、それをメンバーに伝えておけば無駄な名前被りが発生せず、無駄な作業時間の発生も防ぐことができます。

色違いのパーツが出てきたら「マルチクラス」にしよう。

さて、順調にコーディングしていた所、次は下のようなボタンが出てきました。

パーツの形自体は「.modBtn01」と同じなのですが、色だけが異なっています。

この時、大体次のようなスタイルを書くと思います。

.modBtn01 {
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 5px;
  background: #2980b9;
}
/* .modBtn01のbackgroundだけを変更 */
.modBtn02 {
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 5px;
  background: #c0392b;
}

これでも間違いではないのですが、次のように書いた方がスマートです。

.modBtn01 {
  font-size: 16px;
    font-weight: bold;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 5px;
  background: #2980b9;
}
.modBtn01.modBtn01-red {
  background: #c0392b;
}

こう書いた場合、赤いボタンのHTMLは次のようになります。

<a href="#" class="modBtn01 modBtn01-red">注意事項</a>

このように、複数のクラスを使ってデザインを表現することを「マルチクラス」と言います。（逆に単一のクラスで表現することは「シングルクラス」と言います。）

青いボタンと赤いボタンの違いは背景色のみで、他の部分は共通しています。最初の例でも書きましたが、共通している部分をコピペでやってしまうと、変更が発生した時にコピペした箇所を全部修正しないといけなくなり問題が発生しやすくなってしまいます。

以上

マークアップはカンプ通りにコーディングすればOKというわけではありません。開発段階でいくらカンプ通りにコーディングされていても、それが保守運用に向かない書き方であれば保守運用が難しくなり運用のコストが高くなる、又は場当たり的な改修を繰り返さざるを得なくなり、結果サイトのデザインが損なわれてしまうことも往々にしてあります。

また保守運用を見越したコーディングが出来ないと、大規模サイトの開発においては保守運用フェーズに行くまでもなく、開発段階でCSSが破綻してしまうことも考えられます。

カンプ通りのコーディングだけでなく、保守運用を見越したコーディングも出来るように常日頃から意識するようにしましょう！（より深くこの辺りの知識を仕入れたい人はを「OOCSS」や「SMACSS」、「BEM」、「FLOCSS」などで検索すると幸せになれるかもしれません。）

以上、たにっぱでした〜