0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

CSS設計完全ガイドを読んで、PRECSSを学びました

Posted at

#CSS設計完全ガイド
CSS設計完全ガイド
HTML/CSSで画面を作るのに、恐怖を感じていたため評判の良かったこちらを購入しました

結論・・・・・めちゃくちゃおすすめです!!

##読んだ感想
今まで我流でHTMLの構造やら、CSSを書いていた自分にとって
どのようにHTMLをとらえるといいのか?
どうすれば再利用しやすいCSSとなるのか?
なにより、自分のCSSなんかわかりずらいな!!って思っていましたwww

そんな自分の道しるべになる本で、分厚いですがサクサク読み進められて2日くらいで読み切りました

##PRECSS(プレックス)とは?
クラスに接頭辞(prefix)をつけて、BEMなどのCSS設計のちょうどよい開発のしやすさを保ち、コードの見通しをよくしてくれる設計手法
(と自分ではとらえています)

##グループ分け

  1. ベース
  2. レイアウト
  3. モジュール
    1. ブロックモジュール
    2. エレメントモジュール
  4. ヘルパー
  5. ユニーク
  6. プログラム

##命名規則

  • 基本
    接頭辞_クラス名_...
    el_btn
    bl_header_wrapper
    などなど

基本的にはローワーキャメルケースを使う

  • モディファイア

基となるクラス名__モディファイア名
何をするモディファイアなのかを明確にすること
モディファイア名は基本__KeyValueの構成
__bgcRed
など、なにをどうするの形で記載する
(基本であり、必ずではない)

PRECSSのモジュール群

各モジュール単位の分け方
厳密にこうだという規則はないので、開発のしやすさや利便性を優先する
経験を積んで最適化すること

グループ 接頭辞 意味 備考
ベース なし 全体の標準となるスタイリングを設定
レイアウト ly_ layoutの略 大きなレイアウト全体の枠組みを定義
ブロック bl_ blockの略 エレメントなどが集まったひとかたまりを定義
ブロックモジュールにレイアウトに関わるスタイリングは原則しない
エレメント bl_ blockの略 最小単位のモジュール
ヘルパー hp_ helperの略 基本的に一つのスタイルのみを定義し、部分的に使いたいスタイルを定義
ユニーク un_ uniqueの略 あるページのみに使われることを明示する。影響範囲がそこのみだと明確にできる
プログラム js_ javascriptの略 jsで使用する要素を定義
プログラム is_ 動詞isの略 jsで使用する要素の状態を定義
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?