[CSS]使い勝手を考慮した、5つのスタイルシートのフォーマット

david walsh blogのエントリーから、可読性・視認性やファイルの容量など、使い勝手を考慮した5つのスタイルシートのフォーマットを紹介します。

How I Format My CSS Files

セレクタごとに1行で記述

セレクタごとに、プロパティ・値なども全てを1行に記述します。スタイルシートの行数が短くなり、ファイルサイズの軽減にもなります。
多くの人は、視認性が低くなると、意見するでしょう。

クラスごとにネストして記述

クラスごとにネストし、タブで字下げして記述します。
スタイルシートの構造が把握しやすくなります。

@mediaを使用して記述

@mediaを使用することにより、複数のメディアタイプを1つのスタイルシートファイルに記述することができます。

セレクタをグルーピングして記述

Globals(共通)、Structure(構造)、Tags(タグ)、Custom Classes(クラス)、Links(リンク)などのようにジャンルごとに記述することにより、セレクタのグルーピングを行います。

21文字目に揃えて記述

21文字目に意味はありません。ツラが揃うように記述します。