素のHTMLからCSSを抜き出してくれるプラグイン、eCSStractorを活用してみる

コーディングのスピードを上げたい

HTMLコーディングはとにかく地道に時間がかかる。
デザイン数にリニアに比例してコーディングの作業時間がかかる。
なので、普段の作業のちょっとしたカイゼン活動で地道に作業時間を減らせたらいいなという記事。
こういうのに興味がある方は前に書いたリロード自動化などの記事も参照してもらいたい。

なるべく色んな作業環境でブラウザを自動リロードさせたい（BrowserSyncの導入に挫折した人向け）
https://qiita.com/ooba1192/items/21c6d18e0826a85b009c

タグを先に付けて、そのあとCSS雛形を書いていくのが儀式になっている

タグ付けは基礎工事なので、自動化するよりは脳内引き出しと相談しながら最適なものを書くのが今のところベターかなと思う。
問題はそのあとのCSS雛形の記述。

こういうタグから↓

<h1 class="ttl">
  <span class="en">my best h1!</span>
  <span class="ja">私の最適なh1！</span>
</h1>

こういうCSSの雛形書いていく作業。

.ttl {}
.ttl .ja {}
.ttl .en {}

これ書くとき、脳は使わないので脳死で記述作業を行っている。
結構エディタを行ったり来たりして作業もするし、タグ量が増えるとしんどくなるときある。

スタイル付け前の覚悟を決めるための儀式みたいなもんと受けいれていたが、これは自動化したい。

eCSStractorの紹介

検索してもあまり日本語の記事がない。
英語で検索したりして前々からアタリをつけていたものの、使い勝手がよくなかったので使わずにいた。
今回設定等をいろいろいじってどうにか使えそうな感触になったので記事にしてみた。

sublimeText用っぽいがVSCodeで使える模様。記事を紹介。
Sublime Textの機能をVisual Studio Codeに移行する
https://qiita.com/sou_lab/items/0a478d18fe4e18ddcada

Bracketsを使っている方はズバリ素晴らしいものがある。理想形。だけどsublime textにはない・・
https://github.com/rcaferati/brackets-cssfier

使い方

公式のgif動画見てください。
ザーっとマウスでタグの記述を選択し、右クリックしてメニューから実行。もしくはキーボードショートカット叩くだけ。
タブで開くか、クリップボードに送るかは設定ファイルで選択できる。

デフォルトの冗長な吐き出しが気に入らないので改造してみる

デフォルト設定だと以下のような吐き出しになる。

<h1 class="ttl">
  <span class="en">my best h1!</span>
  <span class="ja">私のベストなH1！</span>
</h1>
↓
.ttl {
}
.en {
}
.ja {
}

そのままでも用途によってはベストな人もいるだろうけど、私の作業スタイルには合わなかったので改造。
とにかくシンプルに吐き出してくれればあとは勝手に使うので、スタイル。

改造ポイントは以下。
1. 改行をやめてもらう。
2. ブラケットはいらない。（親子でネストして吐いてくれないので邪魔）
3. プレーンCSSコーディングに合うようにしたい。
4. ほんとはclass名だけでなくタグ名も吐いてほしかったが挫折
5. ほんとはclassも親子関係とか複数指定とか持って吐いてほしかったが挫折

設定ファイル例

    "brackets": false,
    "brackets_newline_after": false,

    "ignore": ["inner","fas","txt_center","mincho"],
    "ignore_regex": ["^mt","^mb","^fas-","^fa-","^btn","^w\\d","^ptb"],

    "destination": "clipboard",

    "bem.element_separator": " ",
    "bem.modifier_separator": " ",
    "preprocessor.parent_symbol": "",

    "empty_line_before_nested_selector": false,
    "add_comments": false,
    "comment_style": "CSS"

とりあえず変更した設定だけ転載。
ignoreの辺りは、普段多く使ってるけど、汎用すぎてスタイル指定には使いたくないな～という除外クラスを記述する。
ignore_regesも同情だが、正規表現で記述できる。
たとえば例だと^mtと指定しているが、これは普段mt10,mt20,mt30系のマージンとるユーティリティ定義をしているのでまとめて除外している.
^w\\dこれはw100とかでwidth指定しているユーティリティ的な記述の除外。fontawesomeを除外してるのもいる模様。
separatorの辺りは、こういう指定にしないと後述の変更が適用されなかったので必須。

本体改造例

eCSStractor.py

  #79行目あたり \nを消す
  css_template = "selector {}"
  #209行目あたり \nを消す
　if self.brackets:
　　　output += "." + block["name"] + " {"
　　else:
　　　output += "." + block["name"] + ""
  #230行目あたり \nを消す
  output += empty_line + indent1 + parent_symbol + modifier_separator + modifier + " {"
  #252行目あたり \nを消す
  output += empty_line + indent1 + parent_symbol + element_separator + element["name"] + " {"
  #274行目あたり \nを消す
  output += empty_line + indent2 + parent_symbol + modifier_separator + modifier + " {"

sublimetextの場合は、eCSStractorのパッケージが圧縮されてるので直接編集できない。
eCSStractorのインストール後のデータはここにある。
\SublimeText\Data\Installed Packages\eCSStractor.sublime-package
このファイルを解凍してソース弄ればOK。
解凍してソースをいじったあと、無圧縮のzipでリネームして置き換えればいい。
(一応、作業中はエディタは終了させておいたほうがいいかも。)

改造結果

改造するとこういうのが吐かれるようになります。

<h1 class="ttl">
  <span class="en">my best h1!</span>
  <span class="ja">私のベストなH1！</span>
</h1>
↓
.ttl
.en
.ja

まあ、、これ以上のアレはpythonの知識ないとだめっぽい。
ちゃんとデバッガ入れて、基礎知識いれてやらんと場当たりではどうしようもないので、誰かが公式をforkして使いやすくしてくれないかな。

まだ使い込んでないので、作業時の儀式時間が少しでも短縮されればくらいの認識だがこれから使いこんでみようと思っている。
まずはclass名を毎回ちゃんとつけるとこから癖を直さないと。tag名依存のCSS書くのやめないとな。。