[CSS]最近の自分のCSS：より少ない時間で効率的にマークアップ。デザイン変更もしやすく！

こんにちは、@yoheiMuneです。
最近の仕事は、スマートフォン向けソーシャルゲーム開発で、フロントエンドを担当しています。 今回のブログでは、最近行っているデザイン変更に強いCSS設計について、ブログを書ければと思います。

デザイン変更の反映は素早く

ソーシャルゲームを開発していると、デザイン変更が多い。 それはより面白いゲームにするために日々改善するし、新規機能開発もするし、アプリケーションが成長しているからです。
より少ない時間で効率的にマークアップを行うために、最近は以下のことに注意して、マークアップを行っています。

• HTMLのモジュールを作る、テンプレートをいつも最新化する
• utilityクラスを充実させる
• デザイン変更する時には、出来るだけ編集するファイル数を減らす

上記の3点を行うことで、いい感じのスピード感でマークアップが出来ていると思います。
それぞれどのような内容なのか、何がスピード感につながるのかについて、以下で個別に書きたいと思います。

HTMLのモジュールを作る、テンプレートをいつも最新化する

これはマークアップする方なら良く聞く話だと思いますが、とても重要です。 例えば以下のようなモジュールを定義して、テンプレートを用意することで、 同じモジュールを他の全てのページで利用出来るという仕組みです。

■テンプレート例

これを作成して公開サーバーとかにでもアップしておけば、プロジェクトメンバーで共有して使うことが出来ます。 モジュールを使う際には、該当箇所のソースコードをコピる（自分はChromeの開発者ツールからコピる）ことで、他のページで利用しています。

そして重要なことは2点あります。

1点目は、上記のようなHTMLテンプレートをちゃんとメンテナンスすること（増えたら追加、要らないなら削除）です。メンテナンスを1週間とか放置すると、要らない子になりがちです。

2点目は、上記のようなモジュールにmarginを持たせないことです。
モジュール内の余白（padding）は多くの場合共通ですが、モジュール外の余白（margin）は使うページ毎に微妙に異なるためです。 外側の余白については、基本的に、モジュールを使う側で指定します。

utilityクラスを充実させる

自分がCSSを設計する際には、上記のモジュールを使い、細かい調整を行うために、以下のようなユーティリティのスタイルを定義します。

/*フォントサイズの指定*/
.fs2Small {font-size: 9px  !important;}
.fsSmall  {font-size: 10px !important;}
.fsNormal {font-size: 12px !important;}
.fsMedium {font-size: 13px !important;}
.fsLarge  {font-size: 14px !important;}
.fs2Large {font-size: 16px !important;}

/*マージンの指定*/
.mt0   {margin-top: 0 !important;}
.mt5  {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}

// 他にも、文字色、padding、display、textAlign、など

ここで「!important」を付けている理由は、上記クラスをモジュールのスタイルのカスケード（上書き）に使いたいためです。
例えば以下のようなモジュールが合った場合に、

<style>
.warnArea {
    padding: 10px;
    text-align: center;
    color: red;
    border: 2px dashed #800;
    border-radius: 8px;
}
</style>
<div class="warnArea">注意書きを書くモジュールです</div>

このページで使う時には文字数が多いからという理由で、ここだけ文字サイズを小さくする特例的なことは時々発生します。

<div class="warnArea fsSmall">注意書きを書くモジュールです</div>

この場合、上記のようにfsSmallクラスを追加することで、小さくするようにしています。

このように、モジュールの挙動の変更やマージンの指定、モジュール作る程度のものでないちょっとしたマークアップ用に、ユーティリティを定義しておくと良いと思います。

デザイン変更する時には、出来るだけ編集するファイル数を減らす

今までの2点が出来ていれば、この対応が出来ます。 具体的には、デザイン変更をしたい（例えば、このページだけ特別にボーダーの色を赤から青にしたい）という場合に、htmlファイルだけを編集することで対応出来るようになるということです。
ここで重要なことは、編集するファイルがhtmlファイル1つ（cssファイルを編集してクラスを追加しなくていい）ということです。

上記の例を活用して、例を見てみましょう。例えば、以下のようなボーダーの色を指定するユーティリティ群があったとすると、

/*ボーダーの色*/
.bcBlue  {border-color: blue !important;}
.bcRed   {border-color: red !important;}
.bcGreen {border-color: green !important;}

上記のHTMLに「bcBlue」を追加することで、線の色を変更します。

<div class="warnArea bcBlue">注意書きを書くモジュールです</div>

このように、デザイン変更を行う場合に、HTMLのみを編集すれば出来るというのは素敵なことです。理由は以下の通りです。

• コード量が少ない、早く実装出来る
• 変更量が少ないので、再テスト範囲も狭い。テストしやすい
• cssってscssやlessなどコンパイルする必要がある場合も多く、編集するのが少しおっくうw

ということでソースコードの変更を少なくデザイン変更に対応することは、コーディングスピードアップには重要なことです。

最後に

以上3点が、最近自分がマークアップで注意していることです。 マークアップしている人にとっては当たり前のことかもしれませんが、上記3点のルールを守ることでコーディングをスピード感もって行うことが出来ていいですよー。

他にもこんな工夫があるという点ありましたら、 ぜひ@yoheiMuneまで教えて頂けると嬉しいです。

最後までご覧頂きましてありがとうございました。