CSSの目的別分割とコメント記述について

スタイルシートのコンポーネント化

　サイトにコンテンツを追加するたびに、必要になったデザインを一つの CSS ファイルに書き足し続けた結果、CSS が冗長になり、管理することが難しくなってしまいました。

　そこで、「新規でサイトを作る際に僕がいつも使ってるCSSのセットを公開するよ」を参考にして、CSS を目的別に分割しました。HTML 側で複数の CSS を link 要素で読み込むと、管理が煩雑になっていしまいますが、@import 規則を用いて CSS で読み込めば、簡潔に複数の CSS を管理できます。

@charset "utf-8";
@import url("default.css");
@import url("layout.css");
@import url("element.css");

　上記のような CSS で他の CSS をインポートすれば、HTML 側で読み込む CSS は一つで済みます。これならば、後で更に他の CSS を読み込むことになっても、この一つの CSS だけを書き換えれば良いので、管理が楽にできますね。

　今回はついでに、CSS の視認性を高めるために、ファイル内のコメントの書き方も変更しました。参考にしたのは「CSSのコメントの書き方コレアレ」です。有名サイトの CSS がどのようにコメントを記述しているかまとめたもので、なかなか面白いエントリーです。

/*
	ヘッダ
	ファイル情報
*/

/* -------------------------------------------- */
/* 見出し */
/* -------------------------------------------- */

/* 子見出し */

　色々試行錯誤した結果、上記の様にしました。単純なことですが"-"を連続して書くだけで随分と見やすくなります。

　CSS のコンポーメント化やコメント記述など、基本的なことをきちんと押さえるだけで、メンテナンス性がとても高まりました。これらをまだ取り入れていない方は、導入してみてはいかがでしょうか。個人的に大満足のノウハウでした。