Optimize

MUSUBii はクラス名の後方互換があるため、既存のテンプレートを無理に書き換える必要はありませんが、新しいバージョンの推奨するクラス名に変更することでテンプレートの見通しは良くなります。プロジェクトに余裕がある場合は試してみてください。

Table of Contents

• Change point
  • Shorten
  • Flexibility
  • Media Query
• npm
  • Install
  • Usage
  • Options

Change point

Shorten

v8 ではユーティリティの一部のクラス名を短縮して書けるようになりました。これを利用して、既存テンプレートの HTML を少し圧縮できます。

• 対応したユーティリティは margin・negative・padding の 3 種類
• 短縮形のクラス名は各ページで確認できます

<!-- ex. Before -->
<div class="box is-margin-bottom-sm is-padding-top-lg">ボックス</div>
 
<!-- ex. After -->
<div class="box is-mb-sm is-pt-lg">ボックス</div>

Flexibility

v8 では Flexbox の子要素の横幅を操作する CSS の命名を調整しました。これを適応することよって flex の操作を行なっているプロパティであることが明確になります。

• クラス名は flex のページで確認できます

<!-- ex. Before -->
<div class="box is-0">ボックス</div>
 
<!-- ex. After -->
<div class="box is-flex-0">ボックス</div>

Media Query

v8 では特定の画面サイズで適応する CSS の命名を調整しました。これを適応することによって他の CSS と視覚的な差別化ができます。

• 調整を行なった CSS は text・display・flex・size です
• クラス名は各ページで確認できます

<!-- ex. Before -->
<div class="box is-tablet-12 is-desktop-6">ボックス</div>
 
<!-- ex. After -->
<div class="box tablet:is-flex-12 desktop:is-flex-6">ボックス</div>

npm

クラス名を最適化する CLI ツール musubii-optimize を npm に公開しました。前述のクラス名置換をすべて自動で行えます。

Install

$ npm install -D musubii-optimize

Usage

コマンド musubii-optimize の後に glob 構文で現在地からの対象ファイルを指定し、行いたい処理をオプションでいずれか 1 つ以上付与してください。

$ musubii-optimize ./path/to/dir/**/*.html --short --flex --media

置換されるファイルとクラス名が表示されるので問題がなければ Start overwriting? に対して Yes を選択。中止する場合は No を選択または control + c で処理を停止させます。

✔ Detecting...
 
./path/to/dir/index.html
class="box is-padding-top-md" -> class="box is-pt-md"
 
✔ Start overwriting? › Yes
✔ Done

ファイルの差分を git で確認して問題がなければコミットしてください。

Options