CSS設計完全ガイド
CSS設計完全ガイド
HTML/CSSで画面を作るのに、恐怖を感じていたため評判の良かったこちらを購入しました
結論・・・・・めちゃくちゃおすすめです！！
読んだ感想
今まで我流でHTMLの構造やら、CSSを書いていた自分にとって
どのようにHTMLをとらえるといいのか？
どうすれば再利用しやすいCSSとなるのか？
なにより、自分のCSSなんかわかりずらいな！！って思っていましたwww
そんな自分の道しるべになる本で、分厚いですがサクサク読み進められて２日くらいで読み切りました
PRECSS（プレックス）とは?
クラスに接頭辞(prefix)をつけて、BEMなどのCSS設計のちょうどよい開発のしやすさを保ち、コードの見通しをよくしてくれる設計手法
（と自分ではとらえています）
グループ分け
- ベース
- レイアウト
- モジュール
- ブロックモジュール
- エレメントモジュール
- ヘルパー
- ユニーク
- プログラム
命名規則
- 基本
接頭辞_クラス名_...
el_btn
bl_header_wrapper
などなど
基本的にはローワーキャメルケースを使う
- モディファイア
基となるクラス名モディファイア名
何をするモディファイアなのかを明確にすること
モディファイア名は基本KeyValueの構成
__bgcRed
など、なにをどうするの形で記載する
（基本であり、必ずではない）
PRECSSのモジュール群
各モジュール単位の分け方
厳密にこうだという規則はないので、開発のしやすさや利便性を優先する
経験を積んで最適化すること
| グループ | 接頭辞 | 意味 | 備考 |
|---|---|---|---|
| ベース | なし | 全体の標準となるスタイリングを設定 | |
| レイアウト | ly_ | layoutの略 | 大きなレイアウト全体の枠組みを定義 |
| ブロック | bl_ | blockの略 | エレメントなどが集まったひとかたまりを定義 ブロックモジュールにレイアウトに関わるスタイリングは原則しない |
| エレメント | bl_ | blockの略 | 最小単位のモジュール |
| ヘルパー | hp_ | helperの略 | 基本的に一つのスタイルのみを定義し、部分的に使いたいスタイルを定義 |
| ユニーク | un_ | uniqueの略 | あるページのみに使われることを明示する。影響範囲がそこのみだと明確にできる |
| プログラム | js_ | javascriptの略 | jsで使用する要素を定義 |
| プログラム | is_ | 動詞isの略 | jsで使用する要素の状態を定義 |