#CSS設計完全ガイド
CSS設計完全ガイド
HTML/CSSで画面を作るのに、恐怖を感じていたため評判の良かったこちらを購入しました
結論・・・・・めちゃくちゃおすすめです!!
##読んだ感想
今まで我流でHTMLの構造やら、CSSを書いていた自分にとって
どのようにHTMLをとらえるといいのか?
どうすれば再利用しやすいCSSとなるのか?
なにより、自分のCSSなんかわかりずらいな!!って思っていましたwww
そんな自分の道しるべになる本で、分厚いですがサクサク読み進められて2日くらいで読み切りました
##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で使用する要素の状態を定義 |