こんにちは！Webコーダーのこんかいです！

HTMLタグからCSSセレクターを自動生成するVSCode拡張機能「ExtractionCssSelector」をご存知でしょうか？

HTMLを選択してExtractionCssSelectorを使用すれば、
ワンクリックでCSSセレクターを生成・コピーできる便利なツールです。

私も日常的に愛用している拡張機能の一つなのですが、
普段FLOCSS設計でコーディングを行っている際に、少し不便に感じる点がありました。

本記事では、FLOCSS設計に最適化したExtractionCssSelectorのカスタマイズ方法をご紹介いたします！同じような課題を感じている方の参考になれば幸いです。

FLOCSS設計で感じていた不便な点

まず、具体的にどのような不便さがあったのかをご説明します。

以下のようなHTMLを例に、
デフォルト設定のExtractionCssSelectorでCSSセレクターを生成してみましょう。

<section class="p-news">
  <div class="l-inner">
    <div class="p-news__header-wrap">
      <hgroup class="p-news__header-group c-header-group">
        <p class="p-news__header-group__sub-ttl c-header-group__sub-ttl" lang="en">お知らせ</p>
        <h2 class="p-news__header-group__ttl c-header-group__ttl" translate="no">News</h2>
      </hgroup>
    </div>
    <div class="p-news__content js-content">
      <div class="p-news__item u-pc"></div>
      <div class="p-news__item"></div>
      <div class="p-news__item"></div>
      <div class="p-news__item"></div>
    </div>
  </div>
</section>

このHTMLから生成されたCSSセレクターを
_p-news.scssファイルに貼り付けると、以下のような結果になります。

.p-news {

}

.l-inner {

}

.p-news__header-wrap {

}

.p-news__header-group {

}

.c-header-group {

}

.p-news__header-group__sub-ttl {

}

.c-header-group__sub-ttl {

}

.p-news__header-group__ttl {

}

.c-header-group__ttl {

}

.p-news__content {

}

.js-content {

}

.p-news__item {

}

.u-pc {

}

問題点：不要なセレクターが混在してしまう

ご覧の通り、HTML内のすべてのクラス名がCSSセレクターとして出力されています。
しかし、_p-news.scssファイルにはプロジェクト層（p-）のスタイルのみを記述したいため、
.l-innerや.c-header-groupなどは不要です。

本来であれば、以下のようにプロジェクト層のセレクターのみが出力されることが理想的です。

.p-news {

}

.p-news__header-wrap {

}

.p-news__header-group {

}

.p-news__header-group__sub-ttl {

}

.p-news__header-group__ttl {

}

.p-news__content {

}

.p-news__item {

}

毎回手動で不要なセレクターを削除していたのですが、
これが非常に手間で、削除し忘れによるミスも発生していました。

こんかい

どうにかできないものか…

ExtractionCssSelectorのフィルター機能を活用した解決方法

そこで活用したのが、ExtractionCssSelectorのフィルター機能です。
この機能を使うことで、特定の条件に合致するセレクターのみを出力することができます。

設定方法

まずは、VSCodeの拡張機能タブから「ExtractionCssSelector」を選択し、歯車アイコンをクリックして「拡張機能の設定」を選択

する次のような画面が出てくるかと思います。

こちらの、「Extractioncssselector: Exclude Regex」の項目に、
以下の正規表現パターンを追加してください

パターン1：プロジェクト層（p-）のみ抽出

^(?!.*\.p-).*$

パターン2：レイアウト層（l-）のみ抽出

^(?!.*\.l-).*$

パターン3：コンポーネント層（c-）のみ抽出

^(?!.*\.c-).*$

settings.jsonでの設定例

settings.jsonファイルで直接設定する場合は、以下のように記述します。

{
  "extractioncssselector.excludeRegex": [
    "^(?!.*\\.p-).*$",
    "^(?!.*\\.l-).*$", 
    "^(?!.*\\.c-).*$"
  ]
}

設定後の動作

この設定により、以下のような使い分けが可能になります：

ExtractionCssSelector【filter1】: .p-から始まるクラス名のみ出力
ExtractionCssSelector【filter2】: .l-から始まるクラス名のみ出力
ExtractionCssSelector【filter3】: .c-から始まるクラス名のみ出力

実際に使ってみるとこんな感じ。

これが非常に便利です。逆になんで今までしてこなかったんだ….

余談

私はパターン1のフィルターを以下のような正規表現にカスタマイズして使用しています。

.l-|.c-|.u-|.is-|.js-|.--

わざわざなぜこれにするかというと、FLOCSSを使用していないときには普通に使いたいからです。

この正規表現だと.p-のみではなく、.l- .c- .u- .is- .js- .-- を出力制限しているので、
.p-はもちろん他のCSS設計でも使用できます。

その他のカスタマイズ機能

ExtractionCssSelectorには、今回紹介したフィルター機能以外にも便利なカスタマイズ機能があります。

• ID属性の抽出設定: IDセレクターを含めるかどうかの選択
• 出力フォーマットのカスタマイズ: セレクターの出力形式を調整

これらの機能も組み合わせることで、さらに自分好みの設定にカスタマイズすることができます！

まとめ

今回は、ExtractionCssSelectorをFLOCSS設計に最適化するカスタマイズ方法をご紹介しました。

たった一つの設定を追加するだけで、これまで手動で行っていた煩雑な作業を自動化でき、コーディング効率が大幅に向上します。FLOCSS設計でコーディングを行っている方には、ぜひお試しいただきたい設定です。

皆さんもぜひ、ご自身の開発スタイルに合わせてExtractionCssSelectorをカスタマイズしてみてください！

参考資料

ExtractionCssSelector – Visual Studio Marketplace

marketplace.visualstudio.com

HTMLタグからcssセレクターを生成するVSCode拡張機能を作った

zenn.dev