CSSのプロパティを並び替える『CSScomb』

ブログ

CSSを書くとき、思いつきで必要なプロパティをどんどん書き並べて行ってしまうことが良くあります。それを、プロパティの重要度順? に並び替えてくれるのが「CSScomb」です。

例えば、次のような CSSの場合

lNavi a {

color: #fff;
border-bottom: none;
display: block;
background-repeat: no-repeat;
background-image: url(../_images/bg_lnabi_normal.gif);
padding: 8px 5px 6px 34px;
font-size: 93%;
text-decoration: none;
}

並び替えると、こんな感じ。

lNavi a {

display: block;
padding: 8px 5px 6px 34px;
border-bottom: none;
background-image: url(../_images/bg_lnabi_normal.gif);
background-repeat: no-repeat;
color: #fff;
text-decoration: none;
font-size: 93%;
}

まずは、表示形態(display)がどうなっているか、余白周りなど表示のスタイルを決めるプロパティが並び、次に背景を整えて、最後に表面を整えるプロパティ群といった具合に、役割ごとにソートされています。

ソートの重要度などは、自分で設定することもできます。

Sassの書式にも対応していて、Codaや Sublime Text 2へのプラグインも提供されています。
さらには、gzipにしたときに容量を圧縮できる効果もあるのだとか?

定期的にこのツールにかけて、CSSをキレイに保つと良いかも知れませんね!

たにぐち まこと

『よくわかるPHPの教科書』や『マンガでマスター プログラミング教室』の著者。 ともすた合同会社で、プログラミング教育やこども向けの講座などを Udemyや YouTubeで展開しています。

コメントを残す

Top