PRECSSを使ってコーディングしてみた感想

2023年9月17日更新

PRECSSとは

OOCSSやSMACSS、BEMの素晴らしさ巧みに取り入れ更に進化させた強力なモジュール設計。それがPRECSSです。

PRECSSはCSSの設計手法のひとつです。

詳しい解説は公式サイトに譲るとして、この記事では実際にPRECSSでコーディングしてみた感想を書いていきます。

まとめ

Good: BEMで微妙だった命名周りに解決策を提供している
Good: ヘルパークラスやオリジナルクラスの導入を許容しているなど、拡張性に富んでいる
微妙：ブロックモジュールは使い回すこと前提。そうできるのが理想だが、現実はそうもいかない

良さげなところ

スネークケースで命名

<div class="bl_halfMedia">
  <img class="bl_halfMedia_img">
  <div class="bl_halfMedia_desc">
    <h3 class="bl_halfMedia_ttl"> ... </h3>
    <p class="bl_halfMedia_txt"> ... </p>
  </div>
</div>

これまでBEM+ケバブケースで命名していたので（例：top-mv__title-text）、スネークケース+キャメルケースのこの形は気持ち悪いなぁ…と思ってしまいました。ですが、実際に書いてみるとスネークケースの方が接頭辞・構造間の区切りがわかりやすいんですよね。視認性に優れた命名だと思います。

ネストされた子要素が直近の親要素の名前も継承するのも許容

<div class="bl_halfMedia">
  <img class="bl_halfMedia_img">
  <div class="bl_halfMedia_desc">
    <!-- ○ 「bl_halfMedia_desc」を継承 -->
    <h3 class="bl_halfMedia_desc_ttl"> ... </h3>
    <!-- ○ 「bl_halfMedia_desc」を継承 -->
    <p class="bl_halfMedia_desc_txt"> ... </p>
  </div>
</div>

BEMだとBlock__Element1__Element2みたいな__複数使用はNGでした。このルールを守ろうとするとBlock__Element1-Element2-Element3といった冗長で煩雑な命名になりがちでした。かといってBlock__Elementの命名で一貫しようとするとクラス名が枯渇して命名に頭を悩ませることに…。PRECSSでは必要に応じてネストされた子要素で直近の親要素の名前を継承できます。これにより、要素の親子関係を明確に定義できるとともに、子要素の名前の重複を避けることができます。下手に「きれいなBEM式命名」にこだわるより、こちらの方がスマートですね。

ヘルパークラスを使用できる

.hp_db { display: block !important; }
.hp_tac { text-align: center !important; }
.hp_w400 { width: 400px !important; }
.hp_w50p { width: 50% !important; }
.hp_lh1_5 { line-height: 1.5 !important; }
.hp_MT1e { margin-top: -1em !important; }
.hp_bgcWhite { background-color: #fff !important; }

//1つ以上のスタイルの例
.hp_centering {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

PCのみで表示する、とかはヘルパークラスで定義しておくと便利です。BEMのルールには含まれていませんが、私は以前から使っていました。PRECSSでは公式がヘルパークラスの使用を認めています。ヘルパークラスの乱用は設計を壊してしまうのでよくないですが、あるととても便利です。

微妙なところ

すべてのブロックモジュールが使い回すこと前提

複数の子要素やエレメントモジュールを1つの塊としてまとめ、サイト内のどこでも使用できるようにすることがブロックモジュールの基本的な考え方です。

とのことですが、この考えにはちょっと疑問があります。

慣れたデザイナーによるよく整理されたデザインでは上記のような「きれいな」設計にできそうです。しかし、現実のデザインデータはもっと汚いです（私のいた環境がアレなだけかもしれませんが…）。PRECSSではページ特有のグループを「ユニーク（接頭辞un_）」と定義していますが、ヘッダー等の共通部分を除いたら現実的にはほとんどがユニークに分類されてしまうのでは？と思います。

解決策として、私はオリジナルのグループ「common-blocks（接頭辞cb_）」を追加することにしました。ヘッダーなどのサイト全体の共通部分はcommon-blocksに分類し、ページ固有のブロックはブロックグループ（接頭辞bl_）に分類します。ページ固有のブロックは格納するディレクトリを分けることで分類します。また、複数回使用されるブロックはcommon-blocksへ移動するようにします。

まあこれはPRECSSの問題というより、モジュールの「モ」の字も考えられてないデザインのせいですね。

以上を踏まえてちょこっとコーディングしてみた例がこちらです。ヘッダーをcommon-blocksに分類し、ページごとにディレクトリを分けて/src/scss/pages/top/blocks以下にトップページのブロックを格納するようにしました。

感想

これまでの手法を踏襲しつつ、痒いところに手が届いているCSS設計だと思いました。BEMよりもルールは緩めな印象ですが、かといって堅牢さが失われるわけでもなく、拡張性もありますね。個人的には視認性の高い命名方法、命名の柔軟性、接頭辞が気に入りました。これまではなんちゃってBEMを使っていましたが、今度からPRECSSを使ってみようと思います。