BEMPocket今回、何気なくフレームワークを使うことでなんとなく使っていたCSSルールをしっかり学んでみたので大まかな部分をメモしておきます。理解した上で使っていき気づきがあったら追記していく予定です。今回はSMACSS・OOCSS・BEMの3つルールについてしらべました。SMACSSベース・レイアウト・モジュール・ステート・テーマの5つのカテゴリに分けたルールを元に設計する手法。ベースルールセレクタを使いスタイル適用をする。IDやClassを使わないルール。reset.cssや、normalize.cssなどがこれに当たる。レイアウトルール大枠のレイアウトルールの指定。{}クラス指定で接頭語(layout-やl-)をつけわかりやすくすることを推奨。モジュールルール部品ごとにまとまりのクラス名とパーツごとのクラス名をつくる。18px;}ステートルールモジュールの特定の状態のルールを上書きする。none;}.is-active{display:block;}モジュールに上書きすることで制御ができる。Javascriptなどを使い制御したりする。バーガーメニューのメニュー表示ON/OFFなどテーマルールmain.cssを読み込んだ後、thema.cssを読み込みデザインスタイルを変更する。CSS(オブジェクト指向CSS)の略。容器と中身で切り離すことで別の容器に中身を入れ替えることができる!という考え方。class=“text”>各項目を埋めてください。class=“text”>各項目を埋めてください。中身の組み合わせが変わったとしても、パーツデザインに影響を受けない設計をします。さらなる特徴として、HTMLタグに依存しないことです。class=“title”>のようにタグが変わってもCSSで指定することで影響を受けないようにする。外装・見た目のことStructureで指定するもの。共通する普遍的なもの。3px;text-align:center;}Skinで指定するもの。変化する色やサイズを指定する。30px;}それらを組み合わせ次第で形が変わる。btn-green”>ボタン2</div>BEMBEMとは、Block、Element、Modifierの3つに分けて命名規則を元にClass名を記述する方法。(=修飾子)Blockとはブログだと、ヘッダー・フッター・ナビゲーション・記事・検索エリアなどのパーツのまとまりをいう。<div.class=“article”></div>ElementとはBlockのかなの一つ一つのパーツがElementに当たる。記事のBlockならばタイトル(h2)・記事カテゴリ(p)・記事本文(p)などのパーツであるElementからなる。class=“article__txt”>本文</p></div>ModifierとはElementの中でも見た目が少し変わるもの作る場合に改めてElementを作るのではなくModifier(拡張子)を使う。Modifierの命名規則Key(固有名詞)とValue(値)をつける。class=“article__txt”>本文</p></div>この例だと一番最初の記事のみ枠を付けたいのでボーダーを付けた。Block__名詞_値の命名規則なのでarticle__border_solidだいたい、articleブロックのborderがsolidなのだということが誰が見てもわかるようになる。この調子で、ElementにもModifierをつけることも可能。その命名規則はBloack__Element_名詞_値となる。タイトルを変えたい場合article__title_font_smallのような形にする。)ハイフンで区切るまとめ私は普段CSSフレームワークとしてFoundationを使用しており、OOCSSの形は、よく目にしていた気がします。感覚的にOOCSSの形を自分なりにやっていた感じです。感覚でやっていた文汎用性に欠けており使い勝手が悪かったです。今後、意識して記述していきたいです。Youtube生主系Webエンジニアです。毎日どうやったらネト充できるか考えてますいくつか名前があります。放送での名はBlanket11でゲームでの名はフォクシーという感じです。cheekpouch.com。