マリンロードスタッフブログをご覧いただいている皆様、こんにちは。
フロントエンドエンジニアの虎澤です。

今回は、コーディング時にCSS設計を取り入れ、作業の効率化をはかるその実例をご紹介致します。

もうブログでも何回も引き合いに出した「横並びリスト」
このレイアウト、1サイト作る中でおそらく一番頻繁に使用します。
「横並び」になれば全てベースは同一のレイアウトになります。

コーディングにおいては、この「汎用的に使われるレイアウト」をいかに共通化し、使い回すかが時間短縮やメンテナンス性の向上に関わってきます。

実際に、「横ならび」の部分を共通化した例をご紹介致します。

■見た目

■HTML

■CSS

最近、横並びを実現するのに使うのが、display: inline-block;です。
インライン要素とブロック要素のどちらも合わせもつ、とっても便利なスタイルです。

この、display: inline-block;を使って横並びを表現する際、「必要最低限」のスタイルをピックアップして、共通パーツ化することが非常に重要となります。

今回の例でいうと、

上記部分が共通パーツに該当します。
（他にも共通パーツは存在しますが今回は割愛します）

■display: inline-block;とした要素を横並びにした時にできる余白を消す「font-size: 0;」
HTMLコードを書く時、大半の人はタグごとに改行したりインデントを入れたりして整形しますよね。
display: inline-block;とした要素が横に並ぶと、コード上でタグとタグの間で改行されている場合、余計な隙間ができてしまいます。
昔は

と書いて余白を消していました。
font-size: 0;とすることで、余白自体のウェイトをなくしてしまうので、綺麗になるわけです。

■横並びにした要素の水平方向の位置を揃える「vertical-align: top;」
使っているリセット用のCSSによっては、display: inline-block;が適応される要素にかかるvertical-alignがmiddleだったり、まちまちです。
共通パーツ化する際に、この部分も初期化してあげることで、どこで使っても綺麗に上揃えになります。

■要素間に余白があることを考慮した「margin-left: 0;」
横並び要素の多くは、その要素間に余白があることが多いと思います。
ただその数値は、10pxだったり20pxだったりで「共通化」できるほど統一できないので、特に設定はしません。
ただし、余白がある場合の、最初の要素にかかる余白は0にしてレイアウトを整えることが多いです。
ですので、余白があることを考慮し、最初の要素にmargin-left: 0;したものを共通パーツとして用意しておきます。

これらをベースとして、あとは要素の幅などの細かいスタイルを個別に書いていくわけです。
上記のような共通パーツは、HTMLを組む際にクラスを追加するだけで適応されるので、とても作業効率が上がります。
他のスタイルに影響がでない、本当に「必要最低限」のスタイルのみ設定してあげることが非常に重要となります。
今まで各要素毎にfloatなどをかけていたのがアホらしくなりますね。

コーディング時には、このように先のことを考えて設計していくことが大切です。
まだCSS設計に触れたことがない人は、よければ実践してみてください。

以上、虎澤でした。