作業効率アップ！綺麗なコードを書くための基本的なポイント

こんにちは。キオミル株式会社フロントエンドエンジニアの野勢です。

Web制作のプロジェクトは、Webサイトを新たに作成するだけでなく、メンテナンスや保守といった業務も存在します。より良いWebサイトを作り上げていくためには、リリース後も定期的に更新やアップデートをする必要があります。また、更新やメンテナンス業務は定期的に実施するものですので、メンテナンスをしやすいWebサイトにしておくことも大切です。そして、メンテナンス業務のしやすさは、Webサイト制作時にいかに綺麗にコーディングするかに掛かっていると言えます。

綺麗なコードとは？

「綺麗なコード」とはどのようなものを指すのでしょうか？私は以下の３点が重要だと考えています。

• 要素やプロパティを正しく使う
• 編集、拡張に対応しやすい
• 他の人が作業する際も状況を把握しやすい

要素やプロパティの正しい使い方についてはW3Cで細かく規格化されているので、それに従って記述するようにしましょう。

では「編集、拡張に対応しやすい」「他の人が作業する際も状況を把握しやすい」ようなコードとはどのようなものでしょうか。

今回の記事ではこの２点に焦点を当て、コーディングのポイントを紹介していきます。

HTMLは要素ごとにインデントする

HTMLを記述する際には、インデントや改行を正しく利用し、見やすいコードにすることを心がけましょう。インデントや改行で要素の構造を分かりやすくする事で、CSS記述時に現状をイメージすることが容易になり、思い通りのレイアウトをスムーズに作成できます。

×悪い例

<ul>
    <li><a href="https://sample/"><img src="img.jpg" alt="画像"></a></li>
    <li><a href="https://sample/"><img src="img.jpg" alt="画像2"></a></li>
</ul>

こちらは悪い例です。li要素の中身が改行されておらず、要素の構造が見た目で判断しづらくなっています。

確かにコードの長さで見れば1行で収まっているため、改行しなくて良いように思います。しかし、複数人で作業することを考えると、要素の構造をより把握しやすいようにしておくべきです。コードは必ず要素ごとに改行するようにしましょう。

〇良い例

<ul>
    <li>
        <a href="https://sample/">
            <img src="img.jpg" alt="画像">
        </a>
    </li>
    <li>
        <a href="https://sample/">
            <img src="img.jpg" alt="画像2">
        </a>
    </li>
</ul>

こちらのコードは改行とタブで綺麗に整頓されているため、入れ子の状態をすぐに把握することができます。

また、imgタグの部分だけを変更したい場合など、行ごと選択してimgタグだけを選択できるため、かなりスムーズに作業できます。良い例と悪い例を見比べてみると、良い例の方がコードを直感的に理解でき、作業もしやすいはずです。

不要なクラス名をつけず、命名は最低限にとどめる。

一言で不要なクラス名と言っても分かりにくいと思いますので、例をあげてみます。

×悪い例

<ul>
    <li class="img-list">
        <a class="img-list__img" href="https://sample/">
            <img src="img.html" alt="画像">
        </a>
    </li>
    <li class="img-list">
        <a class="img-list__img" href="https://sample/">
            <img src="img.html" alt="画像2">
        </a>
    </li>
</ul>

こちらの例では子要素ひとつひとつにクラス名を付けています。要素ひとつひとつにクラス名をつけると命名にも時間がかかりますし、CSSを記述する際にも固有のクラス名を毎回打ち込むのは時間がかかります。

この構造は下記のように親要素にクラス名を付けるだけで解決できます。

〇良い例

<ul class="img-list">
    <li>
        <a href="https://sample/">
            <img src="img.html" alt="画像">
        </a>
    </li>
    <li>
        <a href="https://sample/">
            <img src="img.html" alt="画像2">
        </a>
    </li>
</ul>

子セレクタや隣接セレクタ、擬似クラスなどを活用し、なるべくパーツごとにクラス名を付けすぎないよう心がけましょう。（ただし、擬似クラスの多用により複雑になりすぎる場合など、臨機応変にクラス名を付けた方が良いシーンも存在します。）

CSSプロパティの記述順を揃える

プロパティの記述順は厳密なルールは定義されていません。しかし、それぞれ違った順序で書いてしまうと見づらくなり、プロパティの競合が起きる原因にもなります。

CSSの記述順として推奨されているパターンは2つあります。ひとつはアルファベット順、もうひとつは視覚順です。

アルファベット順の記述方法は、GoogleのガイドラインGoogle HTML/CSS Style Guideで推奨されています。このルールのメリットは、記述者によって記述順のばらつきが無くなることです。

しかし、widthとheight、topとbottom等のセットで調節する事になるようなプロパティが隣接していないと私はコーディングしづらく感じます。

そこで私がおすすめしているのが、視覚順で書く方法です。視覚順の記述方法はFirefoxでおなじみのMozillaの「mozilla.org Base Styles」（現在ページが無くなっているようです。）、W3Cの仕様書で推奨されています。

この２点をベースに考えた私の記述法でよく使うプロパティを並べてみました。基本的にはおおまかなスタイルから細部のスタイルを記載していく考え方です。positionはabsolute/relativeのセットで使うことが多いので、対になるプロパティが発見しやすいよう、一番上に記述します。

• position(top/right/bottom/left含め）
• display/overflow
• z-index
• float
• height/width
• padding/margin/border
• background
• color/text/font/line-height
• cursor

プロパティの記述順はアルファベット順、視覚順のどちらの方法でもいいと思いますが、作業担当者間でルールを統一するようにしましょう！

CSS設計手法を導入する

CSS設計手法とは、メンテナンス性を考慮したクラス名の付け方やCSSのコードの管理方法を規定するものです。CSS設計手法を取り入れることで、大規模なWebサイトの作成や複数人でのコーディングが行いやすくなり、メンテナンス性を向上させることができます。

ポピュラーなCSS設計手法としてはBEM、OOCSS、SMACSS、FLOCSSなどが挙げられます。

BEMはBlock、Element、Modifirerの頭文字を取ったもので、クラスの命名方法を取り決めるものです。BlockとElementはアンダースコア2つで区切り、ElementとModifierはハイフン2つで区切るというルールを元にクラス名を統一します。

<nav class="nav">
    <ul class="nav__list">
        <li class="nav__menu--active">menu1</li>
        <li class="nav__menu">menu2</li>
        <li class="nav__menu">menu3</li>
    </ul>
</nav>

クラス名の被りや迷いを解消することができますが、デメリットとしてはクラス名が長くなりがちです。

OOCSSはObject Oriented CSS（オブジェクト指向のCSS）の略語で、「構造と見た目を分離してスタイルを当てる」考え方です。構造とはレイアウトのことで、見た目とは色やフォントサイズなどのレイアウトに影響しないスタイルのことです。

OOCSSを導入することでコードの記述量を減らすことができますが、一方でクラスの再利用により、一部のスタイルを変更するとサイト全体に影響してしまうという点がデメリットです。

例

<p class="btn btn-red">
    <a href="">ボタン</a>
</p>

.btn {
    width: 250px;
    padding: 5px 20px;
    text-align: center;
    font-weight: bold;
}

.btn-red {
    background-color: #f00;
    color: #fff;
}

SMACSSはScalable and Modular Architecture for CSSの頭文字を取ったもので、CSSの種類をベース、レイアウト、モジュール、状態（ステート）、テーマの５つに分類して記述する手法です。

このCSS設計手法を使いCSSをカテゴライズすることで、コードの管理が楽になります。また、モジュールカテゴリで共通化できるところは共通化できるため、コード量を少なくすることができます。

FLOCSSはFoundation、Layout、Objectの頭文字を取ったもので、BEM、OOCSS、SMACSSの手法をいいとこどりをしたような手法になります。キオミルではほとんどのサイトがこのFLOCSSを用いて記述しています。

命名規則はBEMをベースとし、OOCSSのように構造と見た目に分けてスタイルをあてます。そして、SMACSSのようにCSSをカテゴリーごとに分類して記述していきます。

サイバーエージェントのエンジニア谷拓樹さんが提唱したCSS設計手法で、公式ドキュメントが日本語で書かれているため学習がしやすく、これから取り入れていきたい初心者の方にもおすすめです。

CSS設計手法については詳しく書くと長くなってしまうので、また別の記事で詳しく掘り下げたいと思っています。

制作するサイトの規模や特徴を踏まえ、それぞれに適切なCSS設計手法を取り入れると、よりメンテナンス時の作業効率が向上します。

まとめ

Webサイトは「表示されればいい」「作り終わったらゴール」ではありません。より良いものを作る上で、修正やアップデートは必ず繰り返すことになりますので、作成時に綺麗なコーディングを心がけましょう。

この記事で挙げたポイントは些細なことばかりですが、これらのポイントを心がけるだけでメンテナンス性の向上に繋がります。