はじめに
2024年10月からデイトラのWeb制作コースの受講をスタートしました。
アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。
OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。
これからデイトラWEB制作コースの受講を考えている方
実際に受講した記録になりますので、雰囲気や大変度合いを測っていただけるかと思います！
現在進行形でWEB制作コース受講中の方
一緒に頑張っていければうれしいです！X（旧Twitter）などで交流しませんか！
卒業生の先輩方
懐かしんでいただければ・・・笑
自分なりに調べた記録も付加していますが、もし間違ってるよー！等ございましたらこっそり教えていただけますと嬉しいです。
初級編DAY25の押さえておきたいポイント
classの付け方
「構造」と「見た目」を分離
OOCSSとはObject Oriented CSSの略で、読み方はオーオーシーエスエス。
「構造」と「見た目」を分離して考える。
構造で基礎を、見た目でバリエーションを定義するイメージ。
- 共通化できるところは共通クラスとして持っておく
- 共通クラスに足りない部分を追加クラスで足していく
コンテナーとコンテンツの分離
特定のコンテナーに依存しないようにCSSを書く。
コンテナーとは親（もしくは祖先）要素のこと。
「依存しない」を言い換えると「使いまわし」できるパーツ（コンテンツ）を用意しておきましょう、という意味。
Sassは入れ子が便利だが、入れ子にしすぎるとコンテナーとコンテンツの分離の原則から外れてしまうので注意が必要！
- 特定のクラスに依存しないように注意
- Sassの入れ子を使う際はコンテナー依存にならないように注意
クラス名から影響範囲がわかるようにする
BEMというCSS設計の命名規則を使うことで、クラス名から影響範囲が分かりやすくなる。
BEMとは、Block、Element、Modifierの頭文字をとったCSS設計のこと。
Blockは「使いまわしできる」パーツ。
Blockを構成する要素としてElementがあり、BlockやElementの見栄えを拡張するクラスとしてModifierが存在する。
ElementはBlockで指定したクラスに対して、子孫要素をアンダーバー2つ（__）でつないでクラス名を決めていく。
見栄えを拡張するクラスとして、ハイフン2つで.card__button–primaryや.card__button–secondaryを加えることで見栄えの変更を実現できる。
状態を管理する
SMACSSと呼ばれるCSS設計手法の中に「ステート」がある。
命名規則は「is-」を接頭辞として先頭につけ、後ろに状態を表す言葉を付ける。
構造と見た目の関係に似ているが、基準となるクラスに対して状態によって見栄えを変える。
状態は要素に対する見栄えの変化なので、要素に紐づく形で指定することが多い。
Sassだと「&」をよく使う。
初級編DAY25の追加で調べたいことメモ
- 各CSS設計について深掘りしたい！
初級編DAY25の感想と記録
YouTubeでちょっとだけみた模写コーディングで、class名にアンダーバー2つ繋げて命名していて、
なんでアンダーバー2つなんだろう・・・？
と思っていたが、BEMを使っていたんだな！
先人の知恵であるCSS設計、
わかりやすく保守しやすくなるものばかりなので、
自分のためにも、ちょっとずつコーディングにも適用してこう！
引き続きがんばろう！
