はじめに
新しく出たcssの設計思想PRECSSについて調べたのでその備忘録です。
PRECSSとは
PRECSS読み方はプレックス。
prefixed cssの略語で、接頭辞付きcssという意味。
ルール
・全てのクラス名に役割に応じた2文字の接頭辞をつける。
・OOCSS,SMACSS,BEMの思想を反映。
・cssのグルーピングは6つ。
1.ベース
2.レイアウト(ly_)
3.モジュール
・ブロック(bl_)
・エレメント(el_)
4.ヘルパー(hp_)
5.ユニーク(un_)
6.プログラム
・js(js_)
・状態管理(is_)
・詳細度はクラスセレクター1つの均一な状態が基本。ただ、BEMのように厳格ではないため、スコープが絞られている場合のみ子(孫)セレクターを使うことも許可している。
グルーピング
1.ベース
リセットCSSのルールセットやプロジェクトにおいて標準となるスタイルを設置するもの。
2.レイアウト(ly_)
ヘッダー、ボディ、メイン、サイド、フッター等の大きなレイアウトを形成する要素に使用する。
原則として、レイアウトに関わるスタイル(width,margin,padding,floatなど)しか行わない。
あくまでも、コンテンツが入る枠を定義するだけ。
3.モジュール
再利用性の高いコードを管理する。
・ブロック(bl_)
- そのモジュール特有の子要素をいくつか持つ。
- 複数の子要素やエレメントモジュールをひとかたまりにまとめて汎用的に使えるようにすることができるもの。エレメントや他のブロックモジュールを含むことも可能。
・エレメント(el_)
- ボタンやラベル、見出し等の最小単位のモジュール。どこにでも埋め込むことができるモジュール。
- 特定のモジュールに依存することなくどこにでも単体で入れられるモジュール。
4.ヘルパー(hp_)
基本的には1つのスタイルのみ。
5.ユニーク(un_)
ある1ページでしか使用されないことを明示するグループ。そのページでしか使わないので、改修や運用時に影響範囲を気にせずスタイルを編集して良い、という印になる。
6.プログラム
・js(js_)
jsにて要素を取得するためのクラス
・状態管理(is_)
要素の状態管理をするためのクラス。(状態を管理する際、専用のクラスを付加し、モジュールとしてスタイリングとは分離することを推奨する)
※所々で!importantの使用を推奨するという記載があるが、それは各々の状況に応じて使用することを検討、がよいと思いますので、ここでは割愛します。(単純にスタイルを上書きたいだけ、であれば使わない方がいいと個人的には思います。)
記法
コードの記法自体は、google HTML,CSS Style Guide, Principle of writing consistent, idiomatic CSS に則ることを推奨
命名規則
・各グループで2文字の接頭辞の後ろは_を使用してクラス名を続ける。
・接頭辞の後ろだけでなく、各モジュールの子要素の命名にも_を使用する。
・_は構造的な階層を表現する役割となる。
1つの階層で複数単語を含む時は、ローワーキャメルケースを使用する。
<!-- >NG< -->
<div class="bl_half_media"></div>
<!-- >OK< -->
<div class="bl_halfMedia"></div>
・各モジュールの子要素は、基本的に親の名前のみを継承する。子要素の中に子要素がネストしている場合も、ネストされている子要素は親の名前のみを継承する。
<div class="bl_halfMedia">
<img class="bl_halfMedia_image" />
<div class="bl_halfMedia_description">
<h3 class="bl_halfMedia_title">タイトル</h3>
<p class="bl_halfMedia_text">テキスト</p>
</div>
</div>
・「親子関係を明確に定義したい」、「モジュールが大きいから子要素の名前の重複を避けたい」といった場合は、ネストされた子要素のクラス名に直近の親要素の名前を含めることを許す。
<div class="bl_halfMedia">
<img class="bl_halfMedia_image" />
<div class="bl_halfMedia_description">
<h3 class="bl_halfMedia_description_title">タイトル</h3>
<p class="bl_halfMedia_description_text">テキスト</p>
</div>
</div>
・シリーズの場合、似たようなモジュールを連番をつけて管理することを許す。ただし、その場合は1つめのモジュールには番号はつけない。なぜなら、後から連番つけるとなったときに1つめにも1をつけないといけなくなるから。
単語の省略
・意味や可読性が損なわれない限り、単語を省略することを推奨する。(BEMはすばらしいけど、クラス名がすごく長くなってしまうから)
・2語以上で1つのまとまりを表す語は、それぞれの頭文字を大文字で表現することを推奨する。(例:northEurope→NE)
省略語例
| 省略前 | 省略後 |
|---|---|
| mainVisual | MV |
| content(s) | cont(s) |
| section | sect |
| title | ttl |
| text | txt |
| button | btn |
| image | img |
| left | l |
| right | r |
モディファイア
・あしらいが変わる
・大きさが変わる
・カラム等一定の規則に沿って振る舞いが変わる
ような場合は、モディファイアを使って上書きをする。
多くはモジュールグループで使用されるが、レイアウトグループなどの他のグループでも使用可能。
・モディファイア名は__keyValueの形を基本とする。
__backgroundColorRedが基本の形だが、el_btn__redでも想像がつくものであればkeyの省略は可能。
名前が長くなるのを避けたい場合は__bgcRedのように省略も可能。
BEMは命名に見た目よりも意味を重視し、色に関するものはbtn_theme_coution等themeという単語を含むことを推奨しているが
PRECSSではそこまでしなくていい。
・モディファイアでスタイルを上書きする場合は、詳細度を高めることを推奨する。
BEMとは異なる思想だが、想定外の事態が発生してもなるべくサイトが壊れないことを優先してこのようなルールにしている。
<div class="el_btn el_btn__orange"></div>
/*NG*/
.el_btn__orange {
background-color: orange;
}
.el_btn {
background-color: white;
}
/*OK 詳細度を高めているので、宣言順が変わってもモディファイアは機能する*/
.el_btn {
background-color: white;
}
.el_btn.el_btn__orange {
background-color: orange;
}
まとめ
細かい使い方は公式ドキュメントを見ていただければと思います。
細かいルールはまだまだありますが、ざっくりとしたルールをまとめてみました。
省略語推奨は、普段BEMを使う私としては驚きでした。
細かいルールも噛み砕いて記述できるようになったら詳細更新します。
追記
・bl_かel_かは非常に悩ましいが、多くのモジュール内に取り込めそうなものはel_という方向でいいのかなと思います。