おしゃべりこんかい

夜更かし組応援!✨

Contact

好きなワードを検索してみよう!

好きなワードを検索してみよう!

運営者プロフィール

プロフィール
アイコン

大学生コーダー|隙間時間に学ぶWEB知識「SUKIWEB」運営者

こんかい

岡山県在住の現役大学生コーダー。高校1年生にプログラミングスクール「デイトラ」でWeb制作を学ぶ。 高校時代はECサイトの運営のバイトを経験。 2024年に開業し、大学生×フリーランスとして活動を開始する。現在は15件以上のサイト制作に携わっている。三度の飯よりコーディングが好き。

HOME > 記事アーカイブ > ExtractionCssSelectorをFLOCSS仕様にカスタマイズしてみた!
ExtractionCssSelectorをFLOCSS仕様にカスタマイズしてみた!

ExtractionCssSelectorをFLOCSS仕様にカスタマイズしてみた!

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

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

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

VSCode拡張機能「ExtractionCssSelector」

私も日常的に愛用している拡張機能の一つなのですが、
普段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

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

_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 {

}
SCSS

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

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

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

_p-news.scss
.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 {

}
SCSS

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

アイコン
こんかい

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

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

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

設定方法

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

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

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

パターン1:プロジェクト層(p-)のみ抽出

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

パターン2:レイアウト層(l-)のみ抽出

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

パターン3:コンポーネント層(c-)のみ抽出

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

settings.jsonでの設定例

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

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

設定後の動作

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

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

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

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

余談

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

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

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

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

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

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

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

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

まとめ

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

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

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

参考資料

この記事が「いいね!」と思ったら
ハートをタップ!

0いいね!
1
2
3
4
5
6
7
8
9
10
累計 23 いいね!

注目度急上昇中!人気記事!

記事情報

ExtractionCssSelectorをFLOCSS仕様にカスタマイズしてみた!

コーディング爆速術
この記事を書いた人
アイコン

大学生コーダー|隙間時間に学ぶWEB知識「SUKIWEB」運営者

こんかい

岡山県在住の現役大学生コーダー。高校1年生にプログラミングスクール「デイトラ」でWeb制作を学ぶ。高校時代はECサイトの運営のバイトを経験。 2024年に開業し、大学生×フリーランスとして活動を開始する。現在は15件以上のサイト制作に携わっている。三度の飯よりコーディングが好き。