Upgrade to Pro — share decks privately, control downloads, hide ads and more …

脱ビギナーのためのCSS入門

 脱ビギナーのためのCSS入門

HTML/CSSの勉強中の方に向けて作成した現場でよく使われるCSS設計、プリプロセッセについて説明しています。

Mentaにてフロントエンドエンジニアを目指す方向けのレッスンを提供しております。ご興味ある方は下記リンクをご確認ください。
https://menta.work/plan/1608

version1-workspace

June 02, 2020
Tweet

More Decks by version1-workspace

Other Decks in Programming

Transcript

  1. 命名規則 の要素と命名規則 Block (塊・起点) Button A Button A Button A

    Button B Input Element (blockの構成要素) Modifier (Block / Elementの  バリエーション) modifierはハイフン 2つで繋ぐ 命名規則 block--modifier
  2. のカテゴリ分け [ ベース ] サイトの背景色 フォントスタイル など(属性セレクタ)  プロジェクトのデフォルトスタイル。一度決めたら基本的に書き換えないもの [ レイアウト

    ] ヘッダー フッター サイドバー など(属性 セレクタ)  ページレイアウトを構成する大枠のスタイル。基本 ページに つしかないもの [ モジュール ] ボタン リスト など(基本 セレクタ)   、 を除いた、ほぼ全ての ページの構成物。部品のスタイル [ ステート ] の制御で切り替わるもの( など)   や の表示 非表示 など、状態変化後のスタイル [ テーマ ] テーマ毎に切り替える必要のあるもの   よりも広い範囲で、ユーザーの好みで ページのスタイルをカスタマイズ  する場合などに使用(必須のカテゴリではない) Aa Aa Background : #b8d200 Click Sign in Sign out