汎用性のあるcssは１つのファイルにまとめて重複削減と制作時間の短縮に！-webaby【エンジニアお父さんの育児・子育て】

ホームページ制作でコーディングをしているといろいろな記述をする経験があります。

また、自分がサイトをコーディングする時に、よく使うcssの記述などもでてきます。そういった汎用性のあるcssは１つのファイルにまとめておくと便利です。

また、この方法によりメリットやデメリットもあります。

今回は、実務でも使っている汎用性のあるcssをご紹介していきます。

1. cssで毎回同じ指定で重複してしまう
2. 汎用性のあるcssを作る
3. 私の個人的なbase.cssの中身を一部ご紹介

cssで毎回同じ指定で重複してしまう

ホームページにはいろいろなコンテンツがあります。ですが、1つ1つ違うデザインでも同じ様なcssの指定をしているところはたくさんあります。

そういった指定を少しでもへらすことで、記述を最小限にし、また今後の修正やカスタマイズなどもしやすくなります。

例えば、次のような例で重複することがよくあります。

こういったコンテンツが2つある場合、テキストを読みやすくするために<p></p>の下に余白を取ります。ですが、通常であれば下記のようにcssを記述してしまいがちです。

これでは同じ指定をしているので無駄が多く、こういったものが多くなればなるほど作業時間も増えていきます。

このような記述の場合、汎用性の高いクラスなどを付けておくと便利になります。下記がhtmlとcssの記述です。

このようにクラスを付けることで記述を短くすることができます。

汎用性のあるcssを作る

このように、あらかじめmargin-bottomを5pxずつにクラス名を付けておくことでhtmlにはクラス名を付けるだけで余白を取ることができます。

こういった使い方ができます。

ですが、汎用性があるからといってこういった書き方にもデメリットはあります。使わないcssをファイルに記述することでファイル容量の圧迫にもつながります。

ただし、無駄なものは記載ぜずに自分に合った汎用性の高いcssをまとめて1つのファイルにしておくと便利になります。

私の場合、「base.css（ファイル名は任意）」という名前をつけて毎回使うようにしています。

私の個人的なbase.cssの中身を一部ご紹介

このような記述をあらかじめbase.cssに記載しています。

また、そのサイトに必要で改変しなくいろいろなページや場所に使うものも、このファイルに付け足していきます。

よく聞く「common.css」などは共通のコンテンツなどを記載したりしますが、私はこれと別に「base.css」というものを作り、他のサイトでもよく使うものやコンテンツの一部のパーツを使いまわしたりする際は、このファイルに記述するようにしています。

もちろん、こういったファイルを作るとファイル数が増えて嫌だという人もいますので、あくまでも好みと自分の使いやすさを考えたものになります。

同じようなサイトや職種が同じサイトでは、こういったファイルを持っていると制作時間の短縮にもつながります。

もし、この記事を読んで作ってみようと思われる方は、自分がどのようなcssを記述して重複しているのか確認してみてください。