こんにちは！
今回はPRECSSの書き方を簡単にまとめてみました。
PRECSSとは
- PRESCSS（プレックス）とは、prefixed CSS（接頭辞付きのCSS）の略
- CSS設計完全ガイドの著者が開発
- CSSを次の6グループに分ける
- ベース
- レイアウト
- モジュール
- ブロックモジュール
- エレメントモジュール
- ヘルパー
- ユニーク
- プログラム
命名規則
- 2文字の接頭辞 + アンダースコア + クラス名
- クラス名はローワーキャメルケース（例：halfMedia）
- 各モジュールの子要素は、基本的に親の名前のみを継承
- 子要素の中に子要素がネストしても、親の名前のみ継承
- ただし、次の場合は子要素の名前を継承しても良い
- 親子関係を明確に定義したい場合
- 子要素の名前の重複を避けたい場合
ベースグループ
- a要素や、 img要素に対する標準スタイルを指定
レイアウトグループ
- 接頭辞: ly_を付ける（layout）
- レイアウトを形成する要素に使用する
- レイアウトとは全体の色分けが出来るレベル
モジュールグループ
- 再利用性の高いコードをモジュールと呼ぶ
ブロックモジュール
- 接頭辞: bl_を付ける（block）
- 複数の子要素を持ち、様々なページで利用できるひとつの塊
- カード、メディアなどを指す
- ブロックモジュールではレイアウトに関わるスタイリングは行わない
- 例外的に上下間の余白についてはモジュールに記載することも許容する
エレメントモジュール
- 接頭辞: el_を付ける（element）
- ボタン、ラベル、見出しなどの最小単位のモジュール
- どこにでも埋め込めるため、汎用的な名前にする
- 色の変更などは、別のクラスとしてモディファイアを作成して同時に指定する
- モディファイアの命名規則
- モジュール名+アンダースコア2つ+モディファイア名
- モディファイア例： el_labelとel_label__red
el_label.el_label__red { color: red; }
- モディファイアにはサイズ指定をしてもよい
- ただし、数値ではなく
sなどの汎用的なキーワードを使用する
- ただし、数値ではなく
- モディファイアの命名規則
ヘルパーグループ
- 接頭辞: hp_を付ける（helper）
- 特定の場所に一つのスタイルを適用したい場合に使用する
!importantを付けることを推奨
ユニークグループ
- 接頭辞: un_を付ける（unique）
- ある1ページでしか使用されていないことを明示する
- 影響範囲を気にせずに改修してよいことを表す
- 命名に悩んだらひとまずユニークグループを使うとよい
プログラムグループ
- 接頭辞: js_を付ける（JavaScriptの場合）
- 接頭辞: is_を付ける（英語のbe動詞）
- JavaScriptなどで要素を扱う場合や、状態を管理するために使用する
オリジナルグループ
- その他、自由に接頭辞を追加してよい
- 例: gridの.gr_4, .gr_6やレスポンシブの.lg, .md, .sm_など
おわりに
今回はPRECSSの書き方を簡単にまとめてみました。CSS設計完全ガイドの内容を元にしています。複雑なページを作成すると、CSSが膨大な量になり整理できていないことがあるので、こういったCSS設計技法を覚えていきたいと思います。PRECSSはCSS設計技法のなかでも、比較的扱いやすいように思ったので、使ってみたいと思います。
95/100
