デザイナーに喜ばれるclass名の命名を考えよう

現在弊社が公開している無料のWordPress用の絞り込み検索プラグイン「VK Filter Search」の有料版の実装状況の確認作業をしていて、classの命名について社内に共有しておいた方がいいと思って書いていたのですが、社内に限らないかなとも思いブロクとして公開する事にしました。

ただ、class名の命名規則については戦争に発展しかねないデリケートな議題でもあると思いますので、あくまで一個人の考えとして生暖かくご覧いただけると幸いです。

CSSがあてやすいclass名を考えよう

今回エンジニアから上がってきた状態が以下の状態で、これにデザイナーがCSSを調整します。

今回ついていたclass名

以下のようなclass名がついていました。

このclass名の場合、例えばこの製品ではチェックボックスは主に「カテゴリー」や「タグ」などで使われますが「投稿タイプ」でも使う事ができます。しかし、デザイナーがその存在に気づいていないと投稿タイプの方のチェックボックスにCSSがあたっていない状態を引き起こしたりします。

その他デザイナーとしてはCSSがつけにくい理由を説明していきます。

共通属性を意識してclass名（ブロック名）をつけよう

先の例ではプリフィックスの次に post_type（投稿タイプ）や texonomy（分類）が続いてしまっていて「検索項目である」という共通の属性を示すclass名がないので、赤枠の要素に共通でCSSを書きたい場合に、全部のクラス名をセレクタに指定しなくてはならなくなってしまいます。

しかし、例えば赤枠に示した「検索項目の外側の要素」という共通属性に対するclassをがついていれば、そのクラス名にデザインを指定できます。
ここではプラグインのプリフィックスの vkfs__ に追加して input-wrap というブロック要素名をつけています。

共通属性名に個別の属性名を追加する

「検索項目」という属性に対して「select」「radio」「checkbox」などの属性をつなげます。

ここまでは BEM（class名の命名記法として主流な書き方の一つ）の考え方と同じでしょう。

汎用品ならマルチクラスの方が良いと思う

上の例で言えば BEM では基本複数のclass名を使わないので、htmlでは一つのclass名だけ記載して、sassでは以下のような書き方になります。

.vkfs {
  %__input-wrap {
    // デザイン指定
  }
  &__input-wrap {
    @extend %__input-wrap;
    &--radio {
      @extend %__input-wrap;
      input {
        // デザイン指定
      }
    }
  }
}

しかし、これだとそれなりにsassに慣れている人は問題ありませんが、多くの人が使う汎用テーマ・プラグインでは、CSSに詳しくない人がデザインを上書きしたい時にやりにくかったり、cssの量としては増えてしまいます。

また以下のように部分一致でセレクタを指定する事もできますが…

div[class^="vkfs__input-wrap"] {
    // デザイン指定
}
.vkfs{
    &__input-wrap {
        &--radio {
            // デザイン指定
        }
        &--checkbox {
            // デザイン指定
        }
    }
}

やはりCSSに詳しくない人でも上書き指定がしやすくなるように、僕個人としては以下のようなマルチクラスで書いてあった方が良いと考えています。

<div class="vkfs__input-wrap vkfs__input-wrap--checkbox">

属性名だけマルチクラスでつけるのは推奨しない

そしてここからは更に個人的好みでもあったりするのですが、以下のように属性値だけをマルチクラスで追加する方法も考えられます。

<div class="vkfs__input-wrap checkbox">

しかしながらこの方法は

vkfs__ などのプリフィックスがついていないので checkbox というクラス名が本製品のデザインのためのCSSなのか、Bootstrapなどフレームワーク関連で用意されているものなのかわからなくなる。
CSSのセレクタが .vkfs__input-wrap.checkbok なるので、単一クラスよりも強くなるので、CSS知識の浅いユーザーが上書きカスタマイズしようとした時に効かない場合が発生する

という弊害があるので僕は使わないようにしています。

テーマは軽く、プラグインは重く

これはCSSを書く方の事になるのですが、CSSのセレクタの指定は基本テーマはカスタマイズされる前提で軽くなるように書いておきます。

逆にプラグインはある程度強いセレクタの書き方にしておかないと、テーマのCSSに負けてしまって意図したデザインが適用できませんので念頭に置いてCSSを書きましょう。

まとめ

CSSの書き方にはBEMやFLOCSSをはじめいろいろあって適材適所だと思いますが、情報としてのグルーピングを考えた命名をしましょう。

この記事を書いた人

石川栄和代表取締役

名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本（共著）
・現場でかならず使われているWordPressデザインのメソッド（共著）
[ 最近のWordPressコミュニティでの活動 ]
WordCamp Tokoy 2023 セッションスピーカー
WordCamp Asia 2023 セッションスピーカー（LT）
WordCamp Niigata 2019 セッションスピーカー
WordCamp Haneda 2019 セッションスピーカー
WordCamp Osaka 2018 セッションスピーカー
WordCamp Kyoto 2017 セッションスピーカー
他

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

今すぐチェック

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。

VK パターンライブラリを今すぐチェック

ブロックエディターで

ABテストを

自由に作成できる VK AB Testing

VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。

VK AB Testing を詳しく見る

AB テストでクリック率 &
売上アップ！