今までサイト制作って渡してしまったら終わりで刹那的なもので寂しかったりしました。
ここ数年は1つのサイトにずっと携わっていて、そのサイトとずーっと付き合っていくためのコーディングってなんぞや？という事を徐に考えてます。

誰が見ても分かるように作る

• ソースコードを見やすく探しやすく
• モジュールも見やすく探しやすく
• 同じ書き方で統一する
• 命名規則を統一する

HTML編

モジュール名は分かりやすく

（段組みレイアウトは置いておいて、個々のコンテンツの話となります。）
パッケージとかだと汎用的な名前になると思いますが、更新をし続ける前提の場合、何を表示しているソースコードなのか、モジュール名見ただけで分かるようにしておくと良いですよね。
モジュール名も具体的にすると独自性が高まり、汎用的にすると反復して使えるものになりますので、モジュールの内容によりメリットデメリットを考慮して命名してあげてください。

私たちのチームでは、「カテゴリ名-単語はキャメルケース」で命名しています。（例：category-tangoTango）

htmlタグの閉じタグは入れる

html5でコーディングの際、閉じタグが省略できるものもあるかと思います。
しかし、liなどの閉じタグがないと見難かったり個人的に気持ち悪かったりするので入れるようにしています。
少しでもコードを軽くしたいので、brやimgなどの閉じタグは省略します。

モジュールはセクション区切りとして使う

(ここで言うセクションはsectionタグの事ではありません)
モジュール間は空けるようにしています。
1行とか2行とか決めておくと視覚的に綺麗です。私の場合は2行空けです。

htmlは後からcssでデザインしやすいように作る

サイトの規模が大きく構造が複雑だったりすると、製造の過程でフロントチームからサーバーサイドのチームへ先にhtmlを渡す場合があります。
一度渡したHTMLに再度修正かけるのがなかなか大変なので、見た目だけなら後からcssで補正できるようHTML組んでいきます。
そのため、HTMLは二度と修正できない、くらいの意気込みで作っています（）

例：

<!-- foodMenu -->
<div class="foodMenu">
    <div class="parts-01">
        <h2><span>果物のリスト</span></h2>
        <ul>
            <li class="li01">りんご</li>
            <li class="li02">メロン</li>
            <li class="li03">キウイ</li>
        </ul>
        <p>残数が残り<em>1</em>になると締め切ります。<span>残り数にご注意ください。</span></p>
    </div>
</div>
<!-- //foodMenu -->

シンプルな例ですが、

• foodMenu
  • 料理のメニューだと分かる名前。他にも野菜・肉などのカテゴリで他にも使いまわしたいので今回は「foodMenu」という名前にしました。
• parts-01
  • foodMenuが反復しても良いように、セクション区切りの用途でfoodMenuを使います。そのため、中身の調整をparts-01のdivでグループ化します。

モジュールの中でもグループ化を意識する

自分流の解釈では大きな箱は揺るがない、という概念ですすめます。大きな箱”ごと”無くなってしまっても、前後の大きな箱には影響しない、もしくはガチッと箱でレイアウトを決めてしまうと中身の要素に左右されにくく、レイアウト崩れしにくい、という事が前提になります。従って、大外にはレイアウト目的以外の用途で余計なプロパティは付与しないようにします。
こちらの記事の考え方に近いです。（→【CSS】CSSプロパティの記述順について考えてみた：イメージ図解の所）

要素の中にインライン要素を仕込む

前述したとおり、階層を意識して、モジュールHTMLも大きなグループから段々と小さくしていくイメージで作成します。
例では「foodMenu」という大きなボックスから、parts-01、h,ul,pと落ちていき、完成させていきます。cssプロパティも同じように考えます。ですので、大外の要素は極力重複しないように作っていきます。

hの中にも仕込む

ボックスの概念で作成しますので、hの中にも何かしらのインライン要素を埋めておいた方が、後々cssでデザインの補正がしやすくなります。（例えばhそのものにcssしては複数可能ですが、「大きな箱は揺るがない」という概念が基本ですので、hが無くなって前後の要素が影響をうけるような作り方になってしまわないよう、spanなどを入れておきます。もちろんデザインにもよりますが。

liにクラスをつける

デザインでアイコンが個別に指定されている場合はつけておきます。固有の名前にせず要素ベースにするのは、使いまわせるように、という理由です。
隣接セレクタなどで指定できなくはないですが、li要素が消えた際に前後の要素に左右されないように作るのが目的です。
また、固有指定する必要がない場合は、ul class="ul01"
などとし、liには何もつけません。
気付いたらdivばかりになっていた、という事がないように、なるべくhtmlもシンプルに書くようにしています。

span

レスポンシブや、後々改行をしたい場合に使用します。あえて「ここで改行する」というような指定がリクエスタからあった場合は、brタグを使用します。

htmlタグはシンプルに(divだらけにしない)。

いくら保険とはいえ、文書構造に関係のない無駄なHTMLは極力減らし、シンプルに。

ガイドラインを設ける

最後にCSS、html、sass、javascript、実作業に関わる書き方の統一など、複数人で行う上で必須と言えるほどあった方が良いです。
長くサイトに携わっていく場合、メモ帳程度でもいいので共有し、やり方を統一するようチームで行っていく事をおすすめします。

ここまで読んでくれた方はありがとうございました。
何かお気づきの点がありましたらご教授いただければ幸いです。






...(-。-)ﾎﾞｿｯ 今度はガイドラインやsass、cssの記事を書こうかなぁ。書けるといいなぁ.....