【冗長チェックツール】CSSの整理するならCSSCSS【軽量化】

こんにちは、mickです。

・大きくなったCSSのプロパティが重複があるか知りたい
・PageSpeed Insightsのスコアを上げたい

こんな要望を解決していきます。

MacでもWindowsでもOKです。

CSSを最適化する
CSSCSSを使う
まとめ。使ってみるとかなり便利

CSSを最適化する

CSSファイルの数は増やさないこと（なるべく@importしないこと）が推奨のため、ひとつのCSSファイルにコーディンすることが増えます。

@importを使うとWebサイトの表示が遅くなる

通常、複数のCSSはある程度同時にダウンロードが行われます。
ところが、@importでは同時にCSSファイルがダウンロードが行われません。

なので、できる限りCSSファイルを少なくしていきます。
結果として、ひとつのCSSファイルが大きくなります。

WordPressも基本はstyle.cssのみ編集

WordPressでも基本的に編集するのはstyle.cssのみですよね。

@importを使ってCSSファイルを増やすとWebサイトの速度が落ちるのがひとつの理由だと思います。

WordPressテーマのCocoonの親テーマstyle.cssは約1万行。
ひとつのCSSファイルがいかに大きくなっていくかがわかります。

実際Cocoonを使うと子テーマのstyle.cssが大きくなっていきます。

CSSが大きくなると以前同じ記述があるかわからなくなる

CSSのファイルが大きくなっていくと、同じセレクタ、同じプロパティ、同じ値をすでに書いているかわからなくなっていきます。

同じ指定がたくさんある状態を「CSSが冗長になっている」といいます。

これはCSSは標準のテキストエディタやWordPressのテーマエディターで手軽に編集できちゃうというのも理由かもしれません。

私もCocoonの子テーマのstyle.cssを編集中で1000行を超えるあたり。
すでに同じプロパティを書いているか、書いていないか確証がありません。

そこでこの同じプロパティを書いているかチェックする必要がでてきました。

具体的な方法：CSSCSSを使う

CSSの冗長をチェックする便利なツールがあります。

Ruby言語ベースの「CSSCSS」です。
Ruby言語ベースなので「CSSCSS」を使うにはRubyの環境が必要です。

大丈夫です。

macOSならRubyは標準で入っています。
WindowsでもRubyインストーラの用意があるのでインストールは簡単です。

次にRubyのインストールが必要なWindows10での作業を紹介します。

RubyをWindows10にインストールする

Rubyのインストーラをダウンロードします。
⇒ Windows用Rubyインストーラ

いろいろなバージョンがありますが、私がオススメされたのは「Ruby+Devkit2.6.6-1(x64)」。

ダウンロードが終わったら、インストーラ「rubyinstaller-devkit-2.6.6-1-x64.exe」を起動します。

インストール中、いくつかオプション設定があります。
すべてにチェックをして進みます。

ライセンスに同意して「Next >」を選択します。

Rubyのインストール場所とオプションをチェックしてインストールを開始します。
オプションは、3つすべてチェックします。

Rubyのインストールが進みます。

Rubyのインストールが終わると次は「MSYS2」と「MINGW」のインストーラが動きます。

ここは画面の指示（If unsure press ENTER）に従って「ENTER」キーを押して進みます。

MSYS2のインストールが進みます。

MSYS2のインストールが終わると、次の操作に移ります。
もう一度画面の指示（If unsure press ENTER）に従って「ENTER」キーを押して進みます。

すべての作業が終わるとインストール画面が消えます。

おつかれさまでした。

CSSCSSを使う

CSSの冗長チェックツール「CSSCSS」を使うためにまずインストールです。

Windows10にCSSCSSをインストール

コマンドプロンプトを起動します。

次のコマンド（文字列）を入力してENTERキーを押します。

gem install csscss

インストールが終わったら、CSSCSSがインストールできているか確認します。
次のコマンド（文字列）を入力してENTERキーを押します。

csscss -V

csscssのバージョンが画面にでてきたらOKです。

macOSにCSSCSSをインストール

ターミナルを起動します。

次のコマンド（文字列）を入力してENTERキーを押します。

sudo gem install csscss

パスワードの入力をします。

インストールが終わったら、CSSCSSがインストールできているか確認します。
次のコマンド（文字列）を入力してENTERキーを押します。

csscss -V

csscssのバージョンが画面にでてきたらOKです。

CSSCSSでCSSの冗長を調べる

実際にCSSファイルの冗長性を調べてみます。

オプションに「-v」を使って、冗長の細かい内容を表示するようにしています。

さらに、短縮形のプロパティ（border-top）と展開系のプロパティ（border-top-style）とが冗長と判断しないように「–no-match-shorthand」を指定しています。

C:\Users\master>csscss -v --no-match-shorthand style.css
{.check-list li::before} AND {.check-mark::before} share 10 declarations
  - -webkit-transform: translatey(-80%) rotate(-45deg)
  - border-right-width: 0
  - border-top-width: 0
  - content: ''
  - height: 0.6em
  - left: 0.8em
  - position: absolute
  - top: 50%
  - transform: translatey(-80%) rotate(-45deg)
  - width: 1em

チェック結果として、冗長なセレクタとその内容であるプロパティと値が画面に出てきます。

大まかに修正は次の流れで行います。

重複しているセレクタとプロパティ、値を一緒にする（合体させる）
一緒にした（合体した）元のセレクタからプロパティ、値を削除する
結果を保存して、もう一度CSSCSSで冗長をチェックする

この結果から冗長をまとめると次のようになります。

.check-list li::before,
.check-mark::before {
  -webkit-transform: translatey(-80%) rotate(-45deg)
  border-right-width: 0
  border-top-width: 0
  content: ''
  height: 0.6em
  left: 0.8em
  position: absolute
  top: 50%
  transform: translatey(-80%) rotate(-45deg)
  width: 1em
}

修正は一度にやるより、少しずつ行います。
すべてを一度に修正してしまうと、修正自体を間違ったときにどこの修正を間違えたかわからなくなってしまいます。