くるみ
- 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の重複をチェックし削除するためのツール2選
CSSCSS
1つ目は「CSSCSS」。
CSSファイルを指定してあげるだけで重複しているプロパティとそのセレクタを出力してくれるアプリケーションになります。
使い方
ターミナルでコマンドを叩いて使うことになります。
では早速使い方を順を追って見ていきましょう。
$ gem install csscss
Rubyのgemとしてインストールします。
$ csscss -v (パス)/style.css
次に重複をチェックしたいCSSのファイルを指定しcsscssコマンドを叩いてあげます。パスは相対パスでも絶対パスでも構いません。
{.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オプションをつけない場合はプロパティが重複してくれるセレクタ名と、重複しているプロパティの数のみを出力してくれます。
CSS LINT
「CSS LINT」も同じように重複しているCSSプロパティを教えてくれるオンライン上のサービスです。
そういった意味では先程紹介した「CSSCSS」と似ているのですが、この「CSS LINT」はそれに加えパフォーマンスや保守性を意識した指摘もしてくれます。
どういうことか、実例を見た方が早いと思うので早速使い方を見ていきましょう。
使い方
タイトル | 概要 |
---|---|
Disallow IDs in selectors | セレクターでIDを使っている |
Disallow units for 0 values | 0という値に単位をつけている(0pxなど) |
Require compatible vendor prefixes | ベンダープレフィックスを互換性のあるものにする必要がある(-webkit-〇〇など) |
Disallow !important | 「!important」を使用している |
その中には正直修正しなくても支障が無いものもありますが、より保守性の高いものにしたい場合にはとても助かりますね。
まとめ
CSSを最適化するツールにおいて未使用のセレクターを見つけてくれるものや縮小してくれるものは他にもありますが、このように重複部分を抽出してくれるものは数少ないのでとても助かりますね。
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝