本文へスキップ

PRECSSとは？接頭辞の一覧とBEM・FLOCSSとの使い分け

32 min read

クラス名は、基本的にPRECSSに準じて命名しています。案件先で指定の命名手法があればそれに従い、特に指定がなければ何かの手法に準じてつけるようにしています。

他の人が書いたCSSを引き継いだとき、.box と .wrapper が何を指すのか迷うことがあります。原因のほとんどは、命名規則（クラス名のつけ方のルール）が決まっていないことです。命名規則をひとつ持っているだけで、コードの読みやすさと保守性は全然違ってきます。

クラス名のルールがないと何が起きるか

CSSのクラス名は、基本的に何をつけても自由です。.red でも .aaa でも、ブラウザはちゃんとスタイルを当ててくれます。

しかし、この「自由さ」が実はやっかいです。ルールがないまま書き進めると、時間が経つにつれて次のような問題が出てきます。

同じパーツなのにクラス名がバラバラになる

たとえば、1つのサイトの中でこんなクラス名が混在していたとします。

<!-- ページA -->
<div class="card">
  <h3 class="card-title">...</h3>
</div>

<!-- ページB -->
<div class="box">
  <h3 class="box_heading">...</h3>
</div>

<!-- ページC -->
<div class="wrapper">
  <h3 class="ttl">...</h3>
</div>

どれも「見出し付きのカード」を表現しているのに、クラス名がバラバラです。このコードを3ヶ月後に修正しようとしたとき、どのクラスがどこで使われているか探すだけで時間がかかります。CSSのどこに定義があるかも一目でわかりません。

命名規則を決めておくと、こうした混乱を防げます。クラス名を見ただけで「これはどんな役割のパーツか」「どこに定義されているか」がわかるようになるのです。

命名規則を使うと、次のようなメリットがあります。

  • クラス名から役割がわかり、コードを読むスピードが上がる
  • 命名で迷わなくなる。コーディングの手が止まりにくい
  • 他の人が引き継ぎやすく、チーム開発や納品後の保守に強い

代表的な命名規則

CSS命名規則にはいくつか種類があります。代表的なものを紹介します。

BEM（ベム）

BEMは「Block Element Modifier」の略で、最も広く知られているCSS命名規則です。クラス名を3つに分類します。「ブロック（独立したパーツ）」「エレメント（ブロック内の要素）」「モディファイア（バリエーション）」です。

区切り文字に __（アンダースコア2つ）と --（ハイフン2つ）を使うのが特徴です。

<!-- BEMの書き方 -->
<div class="card">
  <h3 class="card__title">記事タイトル</h3>
  <p class="card__text">概要テキスト</p>
  <a class="card__link card__link--primary" href="#">続きを読む</a>
</div>

ルールが3つだけなので覚えやすく、世界中で使われています。ただし、レイアウトやユーティリティを区別する仕組みがありません。プロジェクトが大きくなるとクラスの分類がしにくくなることがあります。

FLOCSS（フロックス）

FLOCSSは「Foundation Layout Object CSS」の略です。日本のフロントエンドエンジニアが提唱したCSS設計手法です。SMACSS（スマックス）やBEMの考え方を取り入れつつ、CSSの「設計」に重点を置いているのが特徴です。

FLOCSSでは、スタイルをレイヤー（階層）に分類します。

  • Foundation（接頭辞なし）— リセットCSSやベースのスタイル。例：reset.css, base.css
  • Layout（接頭辞 l-）— ページ全体の大枠。例：l-header, l-main, l-footer
  • Object — Component（接頭辞 c-）— 再利用できる小さなパーツ。例：c-btn, c-icon, c-label
  • Object — Project（接頭辞 p-）— プロジェクト固有のパーツ。例：p-card, p-hero, p-sidebar
  • Object — Utility（接頭辞 u-）— 汎用の調整クラス。例：u-mt10, u-text-center

FLOCSSで同じカードコンポーネントを書くと、次のようになります。

<!-- FLOCSSの書き方 -->
<div class="p-card">
  <img class="p-card__img" src="thumbnail.jpg" alt="記事のサムネイル">
  <div class="p-card__body">
    <h3 class="p-card__title">記事タイトル</h3>
    <p class="p-card__text">概要テキスト</p>
    <a class="c-btn c-btn--primary" href="#">続きを読む</a>
  </div>
</div>

ポイント：

  • カード全体は「プロジェクト固有のパーツ」なので p- を使っています
  • カード内の要素は BEM 風に __ でつなぎます（p-card__title）
  • 「ボタン」のように他のコンポーネントでも使い回す小さなパーツは c-（Component）にします
  • ComponentとProjectの使い分けがFLOCSSの核です。「他の場所でも使うか？」がYesなら c-、Noなら p- です

FLOCSSの強み：CSSの「設計」を階層で考えるため、大規模なプロジェクトやチーム開発で威力を発揮します。どのスタイルがどのレイヤーに属するかが明確で、CSSの読み込み順序もレイヤーに沿って整理できます。

レイヤーの分け方とディレクトリ構成はFLOCSSとは？CSS命名規則の書き方とディレクトリ構成で詳しく書いています。ここでは、PRECSSと比べるための最低限だけに絞りました。

PRECSSとは

PRECSS（プレックス）は、クラス名の先頭に接頭辞（プレフィックス）をつけるCSS命名規則です。そのクラスの「役割」を一目でわかるようにします。

「Prefix」と「CSS」を組み合わせた名前の通り、接頭辞がこの手法の核になっています。ECSS（Enduring CSS）の考え方をベースに、日本のWeb制作現場で使いやすいようにアレンジされた手法です。

FLOCSSと似た「接頭辞で役割を分類する」アプローチです。ただしPRECSSは区切り文字がアンダースコア1つで統一されています。BEMの __ や -- を使わないシンプルさが特徴です。

PRECSSの接頭辞一覧

PRECSSで使う主な接頭辞です。

  • ly_（Layout）— ページ全体の骨格となる大枠。例：ly_header, ly_footer, ly_main
  • bl_（Block）— 独立して使えるコンポーネント。例：bl_card, bl_nav, bl_form
  • el_（Element）— ブロック内の構成要素。例：bl_card_ttl, bl_card_img
  • un_（Unique）— 特定のページでしか使わないもの。例：un_topHero, un_aboutMessage
  • hp_（Helper）— 汎用のユーティリティ。例：hp_mb20, hp_tac

ポイント：

  • ly_ はヘッダー・フッター・メインエリアなど、サイト全体の骨格に使います。数は少なく、ほぼ固定です
  • bl_ が最も使用頻度が高いです。カード・ナビゲーション・フォームなど、繰り返し使うパーツに使います
  • el_ は単独では使わず、必ず bl_ の子要素として使います。PRECSSでは bl_card_ttl のように「ブロック名_要素名」をアンダースコアでつなぎます
  • un_ は「このページでしか使わない特別なパーツ」に限定します。何でも un_ にしてしまうと、再利用できないコードが増えるので注意が必要です
  • hp_ は余白の調整（hp_mb20 = margin-bottom: 20px）に使います。テキスト揃え（hp_tac = text-align: center）のような、1プロパティだけのクラスです

実際のHTMLで見てみる

「カード型のコンポーネント」を、PRECSSの接頭辞を使って書くとこうなります。

<!-- PRECSSで命名したカードコンポーネント -->
<div class="bl_card">
  <img class="bl_card_img" src="thumbnail.jpg" alt="記事のサムネイル">
  <div class="bl_card_body">
    <h3 class="bl_card_ttl">記事タイトル</h3>
    <p class="bl_card_txt">記事の概要テキストが入ります。</p>
    <a class="bl_card_link" href="/article/">続きを読む</a>
  </div>
</div>

対応するCSSはこのようになります。

/* カードコンポーネント */
.bl_card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.bl_card_img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.bl_card_body {
  padding: 16px;
}

.bl_card_ttl {
  font-size: 1.125rem;
  font-weight: bold;
  margin-bottom: 8px;
}

.bl_card_txt {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 12px;
}

.bl_card_link {
  display: inline-block;
  font-size: 0.875rem;
  color: #1e90ff;
}

接頭辞の使い分けがまだ分からなくても、そのまま先へ進んで問題ありません。ここで見てほしいのは、クラス名の先頭を見るだけで役割が判断できるという点だけです。

この書き方のメリット：

  • クラス名の先頭 bl_ を見るだけで「再利用可能なブロックだ」とわかる
  • クラス名がすべて bl_card で始まるので、検索一発で関連するスタイルが全部見つかる
  • ネスト（入れ子）を使わずフラットに書けるので、詳細度（スタイルの優先順位）が低く保たれて上書きしやすい
PRECSSの5つの接頭辞と使い分けの判断

BEM・FLOCSS・PRECSSを比較する

3つの命名規則を並べて比較してみましょう。同じ「カードコンポーネント」を書いたときのクラス名の違いに注目してください。

  • BEM：接頭辞なし。カードは card__title になります。レイアウトを分ける仕組みがないぶん覚えることは少ないのですが、クラス名は長くなりがちです
  • FLOCSS：l- c- p- u- の4つ。カードは p-card__title。ComponentとProjectの線引きで一度は迷います
  • PRECSS：区切りはアンダースコア1つに統一。カードは bl_card_ttl と短く収まります
BEM・FLOCSS・PRECSSで同じカードを書き比べたコード

同じカードを3つの規則で書き比べ

<!-- BEM -->
<div class="card">
  <h3 class="card__title">タイトル</h3>
  <a class="card__link card__link--primary" href="#">リンク</a>
</div>

<!-- FLOCSS -->
<div class="p-card">
  <h3 class="p-card__title">タイトル</h3>
  <a class="c-btn c-btn--primary" href="#">リンク</a>
</div>

<!-- PRECSS -->
<div class="bl_card">
  <h3 class="bl_card_ttl">タイトル</h3>
  <a class="bl_card_link" href="#">リンク</a>
</div>

どれが正解というわけではありません。プロジェクトやチームの方針に合うものを選べば十分です。

それぞれが向いているケースです。

  • BEM：海外のチームとの共同開発や、フレームワークとの併用。世界標準のルールなので誰でも読める
  • FLOCSS：大規模サイトやチーム開発。CSS設計を階層で整理したい場合に向いている
  • PRECSS：1人〜少人数でのコーポレートサイトやLP制作。WordPressのオリジナルテーマなど、長期保守するサイトに向いている

実案件での使い方

ルールを知っていても、実際のプロジェクトでどう運用するかがわからないと使いこなせません。ここでは、PRECSSを中心に実案件で役立つ活用のコツを紹介します。

PRECSSの接頭辞とSassのファイル構成の対応

WordPressテーマでの適用例

WordPressのオリジナルテーマを作るとき、PRECSSの接頭辞を使うとファイル構成も整理しやすくなります。

sass/
├── layout/
│   ├── _ly_header.scss
│   ├── _ly_footer.scss
│   └── _ly_main.scss
├── block/
│   ├── _bl_card.scss
│   ├── _bl_nav.scss
│   └── _bl_form.scss
├── helper/
│   └── _hp_utility.scss
└── page/
    ├── _un_top.scss
    └── _un_about.scss

接頭辞がそのままフォルダ名・ファイル名に対応するので、「このパーツのスタイルはどこにある？」という迷いがなくなります。CSSファイルが増えてきても、構造が一貫しているので見通しが良い状態を保てます。

※ FLOCSSを採用する場合も同様の構成が定番です。foundation / layout / object でフォルダを分けます。object の中はさらに component, project, utility に分かれます。

複数ページでの統一ルール

サイト全体で命名を統一するために、コーディング開始前に次のルールを決めておくとスムーズです。

  • 共通パーツは bl_：ヘッダー内のナビ、フッターのリンク一覧、サイドバーのウィジェットなど
  • ページ固有のパーツは un_：トップページのヒーローセクション、アバウトページの代表メッセージなど
  • 余白・揃えの微調整は hp_：ブロック間のマージン調整、テキストの中央揃えなど

この分類を事前に決めておくだけで、「このパーツは bl_ にすべきか un_ にすべきか」という迷いが大幅に減ります。

命名に迷ったときの判断基準

それでも命名に迷う場面は出てきます。僕はそんなとき、自分にこう問いかけています。

  • 「他のページでも使うか？」→ Yes なら bl_、No なら un_
  • 「親のブロックなしで成り立つか？」→ Yes ならブロック（bl_）、No ならブロック内の要素（bl_親名_要素名）
  • 「見た目の調整だけか、意味のあるパーツか？」→ 見た目だけなら hp_、意味があるなら bl_ か un_

この質問に答えるだけで、ほとんどのケースで接頭辞は決まります。

おわりに

PRECSSは、クラス名の先頭につけた接頭辞でそのクラスの役割を示す命名規則でした。

もちろん、命名規則を入れればCSS設計の悩みが全部消えるわけではないと思います。同じ接頭辞にするか迷う場面は残りますし、途中で方針を変えたくなることもあります。

それでも、ルールがない状態よりは読みやすいコードになります。僕は案件先で指定の命名手法があればそれに従い、なければPRECSSに準じて書いています。次に新しいコンポーネントを作るとき、bl_ と el_ の2つだけでも、ぜひ試してみてください！

RELATED

CATEGORY

Contact

お気軽にご相談ください

X（Twitter）のDM、もしくは本サイトのCONTACTページからご連絡ください。
24時間以内に返信しますので、些細なことでもお気軽にご相談ください。

制作実績を見る Xでのお問い合わせ CONTACTページはこちら