テンプレート＆コンポーネント化
所属している会社では、全てCMS適用前提でのHTMLを作成します。 CMSのページはブロックパーツと呼ばれる部品と、テンプレートで成り立っています。 コーダーはこの2つを主に作成しています。
CMSに乗せるためには、パーツを汎用化させる必要があります。 そこで有効なのがアトミックデザインの概念になります。
アトミックデザインとは、最小の粒となるエレメント（原子）を組み合わせコンポーネント（分子）を構築し、コンポーネントを組み合わせテンプレートを作成する手法です。
エレメント
とは、見出し、画像、本文、リンク等の部品１つ１つを指します。
とは、エレメントを組み合わせ人が読み理解できる構造にしたものです。CMSのブロックパーツはこれを指します。
テンプレートはコンポーネントの集合体となり、１つのページ（コンテンツ）となります。 コンポーネントで気をつけなければならない点は、積み上げパターンを想定する事です。 ブロックパーツはお客様の要望次第で自由に形を変え積み上げられます。
そのため、エレメントの段階からあらゆる積み上げパターンを考慮し空きの担保や崩れが無いかを検証します。
デザインから読み解く力
昨今のwebサイトは、インタラクティブな要素が増え紙ベースでは伝えにくい環境になっています。
私達コーダー（フロントエンドエンジニア）は、この問題を解決するためプロトタイプを作成しクライアントの認識を一致させる事が重要と考えています。
そのため、デザインから動きがある要素を読み取る力が重要になります。 場合によっては、コーダーからデザイナーに動きを提案する必要もあります。
管理＆追加しやすい命名規則
ファイル名やclass名等しっかりルール化する事が重要です。 これは作成者自身のマイルールで構築すると、別の人が更新する時そのルールを読み解くためにコストが掛かるからです。
ファイル名は「単語-単語-単語・・・」となるように単語と単語の間を「-（半角ハイフン）」で区切り命名します。 また、接頭にファイルの用途（img-、 icon-、 bnr- 等）を記載し単語から何に使用されているかなるべく分かりやすく命名し、同じ要素が複数ある場合は、末尾に「-01、-02、-03・・・」と 2桁の連番を付けていきます。
例）img-recommend-01.png、icon-blank.svg、bnr-links-01.jpg
エレメントのclass名は接頭辞として、’element’の頭文字である「el-」を付与します。 また、子要素の命名規則にはclass名の管理や重複を防ぐためBEM記法を使用し、「__」や「--」で単語間を繋ぎます。 下記は大見出し（h2）を上記のルールに沿って作ったHTML構造になります。
<div class="el-heading-lv2"> <div class="el-heading-lv2__holder"> <div class="el-heading-lv2__item"> <h2 class="el-heading-lv2__title">大見出し(h2)</h2> </div> </div> <!-- /el-heading-lv2 --></div>
複数人で作業するためのファイル管理
大規模なサイトになると複数人が携わり同時にファイルを編集する必要が出てきます。 この時問題になるのはデグレードが発生する事です。 これを解決するために私達はgitを導入しバージョン管理を行っています。 ただgitを入れれば全ての問題を解決する訳ではなく、明確なルールが必要になります。
機能の追加＆改修時のgit活用法
お客様に確認頂く専用の環境を用意しています。 gitではdeveloperというブランチを用意し、このブランチを確認環境と常に同期するようにします。
またmasterブランチを本番環境と同期させ、機能の追加を行う時はこのmasterブランチのミラーを用意し機能を開発、完成したらお客様に確認して頂くためにdeveloperブランチにマージします。
ここで本番公開となったらmasterブランチにマージします。 これにより複数の機能を同時に開発し、必要な機能だけを本番に公開する事ができます。