CSSの重複をチェックし削除するためのツール2選

くるみ

CSS書いてたらプロパティやらセレクタがごっちゃになってきたから整理したいな

ということで今回は

CSSの重複をチェックし削除するためのツールを探している
プロパティの重複を楽に見つけられる方法ってある？

という方に向けて「CSSの重複をチェックし削除するためのツール2選」をご紹介します。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

お品書き

スタイルの重複とは？
CSSの重複をチェックし削除するためのツール2選
- CSSCSS
- CSS LINT
まとめ

スタイルの重複とは？

「そもそもCSSのスタイル(プロパティ)が重複するってどういうこと？」という方に向けて、例を挙げると以下のような時です。

.a-content {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.b-content {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

この場合だと3つのプロパティが被ってる状況で、書き方としてあまりよろしくありません。

.a-content,.b-content  {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

なのでこのようにセレクタをまとめてあげるのがスマートです。

しかしコードの量が膨大になってくるとプロパティが重複しているセレクタを見つけるのも一苦労ですよね。

目視でいちいち探すのは大変だぁ…

くるみ

そこで以下で紹介するツールを使えば、その重複してくれるCSSプロパティとセレクタを抽出してくれるので修正するのが容易になります。

CSSの重複をチェックし削除するためのツール2選

CSSCSS

1つ目は「CSSCSS」。

CSSファイルを指定してあげるだけで重複しているプロパティとそのセレクタを出力してくれるアプリケーションになります。

使い方

ターミナルでコマンドを叩いて使うことになります。

では早速使い方を順を追って見ていきましょう。

step1

インストール

$ gem install csscss

Rubyのgemとしてインストールします。

step2

csscssコマンドを叩く

$ csscss -v (パス)/style.css

次に重複をチェックしたいCSSのファイルを指定しcsscssコマンドを叩いてあげます。パスは相対パスでも絶対パスでも構いません。

step3

結果が出力される

{.mark_check:before} AND {.q-box li:before, .q-box2 li:before, .item_detail1 ul li:before} share 3 declarations
  - color: #f8c678
  - content: "\f00c"
  - font-weight: 900
{.p-twitter-box} AND {.rate-box} share 3 declarations
  - margin-left: auto
  - margin-right: auto
  - margin-top: 1em

するとプロパティが重複してくれるセレクタとプロパティ、その数を出力してくれます。

これで抽出することができました。

{.mark_check:before} AND {.q-box li:before, .q-box2 li:before, .item_detail1 ul li:before} share 3 declarations
{.p-twitter-box} AND {.rate-box} share 3 declarations

ちなみにvオプションをつけない場合はプロパティが重複してくれるセレクタ名と、重複しているプロパティの数のみを出力してくれます。

注意

「CSSCSS」を利用するにはRuby1.9以降のバージョンがインストールされている必要があるのでご注意を。

CSS LINT

「CSS LINT」も同じように重複しているCSSプロパティを教えてくれるオンライン上のサービスです。

そういった意味では先程紹介した「CSSCSS」と似ているのですが、この「CSS LINT」はそれに加えパフォーマンスや保守性を意識した指摘もしてくれます。

どういうことか、実例を見た方が早いと思うので早速使い方を見ていきましょう。

使い方

step1

CSS LINTにアクセス

まず「CSS LINT」にアクセスします。

step2

コードを入力する

テキストエリアがあるのでそこに最適化したいCSSのコードを入力し、右下の「LINT!」をクリックします。

step3

結果が出力される

すると修正すべき点を行数とともに出力してくれます。とても見やすいですね。

重複しているプロパティ以外にも、以下のようなことを指摘してくれます。

タイトル	概要
Disallow IDs in selectors	セレクターでIDを使っている
Disallow units for 0 values	0という値に単位をつけている(0pxなど)
Require compatible vendor prefixes	ベンダープレフィックスを互換性のあるものにする必要がある(-webkit-〇〇など)
Disallow !important	「!important」を使用している

その中には正直修正しなくても支障が無いものもありますが、より保守性の高いものにしたい場合にはとても助かりますね。