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

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

くるみ

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

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

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

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

私と一緒に見ていこう!

くるみ

スタイルの重複とは?

「そもそも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

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

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

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

使い方

step1
CSS LINTにアクセス

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

step2
コードを入力する

コードを入力する

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

結果が出力される

すると修正すべき点を行数とともに出力してくれます。とても見やすいですね。
重複しているプロパティ以外にも、以下のようなことを指摘してくれます。

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

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

まとめ

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

CSSを最適化するツールにおいて未使用のセレクターを見つけてくれるものや縮小してくれるものは他にもありますが、このように重複部分を抽出してくれるものは数少ないのでとても助かりますね。

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

コメントを残す