css設計はそうだが、そもそものクラス命名も勉強になった。（ctaやジャンボトロンなど）
芯のあるcssがかけるようになりそう。
鉄則
１，特性に応じてcssを分類する
サイト全体の下地 - ベースグループ
ヘッダー、フッター、コンテンツエリアのスタイリング - レイアウトグループ
モジュールに関わるcss - モジュールグループ
・モジュールそれ自体にはレイアウトに関わるスタイリングはしない
レイアウトに関わるスタイリングとは、width,margin,topなど
そういうのはレイアウトグループにする（.ly_ , .l-）
２，コンテンツとスタイリングが疎結合である
クラス名を使う、属性セレクターを使わない
３，影響範囲がみだりに広すぎない
spanとか > span で使う
４，特定のコンテキストにみだりに依存していない
#main .box とかしない
５，詳細度がみだりに高くない
クラス名を使う
６，クラス名から影響範囲が想像できる
.bl_module_item 的な
７，クラス名から見た目・機能・役割が想像できる
bl_service? .bl_media? bl_aboutService?
８，拡張しやすい
例えばボタンなら.btnに基本スタイリング、モディファイアとして.btn--warningなど
OOCSSとは
Object Oriented CSS（オブジェクト指向css）
CSS設計の基本ともいえる
・ストラクチャーとスキンの分離
↑のモディファイアの話のようなもの
ストラクチャー（構造）
width,height,padding,marginなど
スキン（あしらい）
color,font,bg,box-shadowなど
・コンテナとコンテンツの分離
モジュールを特定のコンテキストに依存させない
BEM
blockの中のblockはOK、ただしelementの中のelementはNO
命名規則
block__element_modifier
MindBEMdingでは
black-name__element-name--modifier-name
Mixとは
blockとblockの中のblockの要素があるとする。
その時
<div class="block">
<div class="block__item anotherblock">
</div>
</div>上記の場合、anotherblockのレイアウトに関するスタイリングはblock__itemにすること
blockは今でゆうコンポーネント的役割かも
実践BEM
・背景色のやつ
.background-color-warning
・btnに右矢印のモディファイア
.btn .btn--arrow-right
・例えば同じボタンでも、3つ以上スタイルが異なる場合は他のブロックとしてつくる
.rounded-btn
・ボタン（ダウンロードアイコン付き）
.before-icon-btn(アイコン自体のスタイリング) .before-icon-btn--download
・見出し
.level1-headingとかつける
・テーブルとかは
.table だと広い
.horizonal-tableとかvertical-tableとかつける
雑に備忘録メモ
・div要素の閉じタグにはなるべくコメントをする。
<!-- -->のやつ
めんどくさいが、emmetで|cと書けば自動補完される
・自分がいままでユーティリティクラス的書き方といっていたもの=カスケーディング
・ホバーなどでボーダーを変化させる場合、border transparentしておく
・くの字の矢印はchevron(シェブロン)と呼ばれる
WEBでは一般的らしい
・カテゴリ名やタグ名につかうやつ .label / .badge
タグとかつけてたな。。
・上に画像、下にテキストがつくモジュールをカードと言う。
それを３カラムのときのモジュールは
.cards
.cards__item .card
みたいに続く
・CTAは「Call To Action」という 検索窓の古い方の案内とかそうかも
・料金表
.price-boxes
・モジュールの粒度
最小モジュールと複合モジュールを意識する
・モジュール≒コンポーネント
・cssのbackground-imageで設定する背景画像はhtml側にstyle属性で書く
・buttonはデフォルトでtype=submitなので、フォーム送信以外のbutton要素にはtype=buttonをつける
なんか勘違いしておりずっと消していた
・posts CMSのポストの一覧のクラス名
.postsは単純すぎて今後の異なるスタイリングのモジュールの追加二対応できない
.staff-blog-postsとかだとスタッフブログ以外に使えない
.vertical-postsがよい
・箇条書きリストul = Bullet list（ビュレットリスト）。
.bullet-list
・順序有りリストol = .order-list
・リストは囲むulにlist、liにlist__item
いままでlists、listにしてた
・display inline-flexはdisplay inline flexと同じ
・scss percentage()