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

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

こんにちは、mickです。

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

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

MacでもWindowsでもOKです。

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冗長チェックツールCSSCSS
CSS冗長チェックツールCSSCSS

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

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

大丈夫です。

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

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

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

RubyInstallerからWindows用Rubyインストーラダウンロード
RubyInstallerからWindows用Rubyインストーラダウンロード

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

Webサイトがオススメするバックアップをダウンロード
Webサイトがオススメするバックアップをダウンロード

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

インストーラを起動する
インストーラを起動する

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

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

ライセンスに同意して進む
ライセンスに同意して進む

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

インストール場所とオプションをチェックしてインストール
インストール場所とオプションをチェックしてインストール

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

イントールが進行中
Rubyのイントールが進行中

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

Rubyのインストールがおわった次はMSYS2のセットアップ
Rubyのインストールがおわった次はMSYS2のセットアップ

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

MSYS2をインストールする
MSYS2をインストールする

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

MSYS2のインストールが進行中
MSYS2のインストールが進行中

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

MSYS2のインストールが終わり次の操作
MSYS2のインストールが終わり次の操作

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

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

おつかれさまでした。

CSSCSSを使う

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

Windows10にCSSCSSをインストール

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

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

gem install csscss

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

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

csscss -V

CSSCSSがインストールできているか確認
CSSCSSがインストールできているか確認

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

macOSにCSSCSSをインストール

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

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

sudo gem install csscss

MacにCSSCSSをインストールする
MacにCSSCSSをインストールする

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

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

csscss -V

CSSCSSがインストールできているか確認
CSSCSSがインストールできているか確認

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

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

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

  1. 重複しているセレクタとプロパティ、値を一緒にする(合体させる)
  2. 一緒にした(合体した)元のセレクタからプロパティ、値を削除する
  3. 結果を保存して、もう一度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
}

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

まとめ。使ってみるとかなり便利

CSSCSSを使えばCSSの冗長を簡単に見つけられます。

さらにCSSのルール(文法)的には合っていても、矛盾する指定をしていても見つけることができます。
(align: center;とalign: right;を同じセレクタに指定しているなど)

冗長がなくなればCSSファイルが軽量化してWebサイトの読み込みも早くなります。
いいことづくし。

CSSファイルが大きくなる前に、定期的にCSSCSSでチェックすればバグも少なくすみそうです。

以上、みなさまの助けなれば幸いです。

初稿 2020/09/12

タイトルとURLをコピーしました