Go my way

1つのCSSファイルにすべてのスタイル情報を書いてしまうと、デザインを変更する際、探し出すのが面倒になってきます。そこで今回は、効率を上げる管理方法を紹介したいと思います。

たとえば、色に関するスタイルをすべて抜き出し、1つのCSSファイルにまとめます。そうすると、サイトの色使いを変えるとき、そのファイルをいじるだけで完了します。さらに、数種類のパターンを作っておけば、読み込むファイルを変えるだけでデザインの変更ができるようになります。このように、よくいじる部分をモジュール単位で管理すれば、管理効率が格段に上がります。

どういったものをモジュール化するかは人によって違うと思いますが、自分がやっているのは以下のとおりです。

• レイアウトに関するCSS
• 色に関するCSS
• フォントに関するCSS
• 見出しに関するCSS

1つ目のレイアウトに関するCSSは、styleswitcherスクリプトと組み合わせると、おもしろいことができますね。あと、フォントに関するCSSもモジュール化しておくと便利です。英字フォントを変えるだけで、サイトの印象がガラリと変わります。

個人のサイトでモジュール化するメリットはあまりないかもしれませんが、大規模サイトになるとメリットは大きいでしょう。特に、リニューアルが多いサイトは導入を考えるべきでしょう。

ちなみに、モジュール化する際は、ちゃんとルールを決めてから行いましょう。中途半端にモジュール化してしまうと、逆に管理効率が下がってしまいます。これでは元も子もありません。

以下、参考にしたエントリー記事です。

• スタイルシートを分けて管理する方法をまとめる

Tag