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で使用する要素の状態を定義
↧
