株式会社トリアナのブログtriBlogトリアナのブログ。webサイト制作なら、トリアナへ。【vol.2】有名な3つのCSS設計をまとめてみた〜SMACSS編〜WEB制作フロントエンド2019.8.1【vol.2】有名な3つのCSS設計をまとめてみた〜SMACSS編〜2019.8.1車もバスも特急列車も酔いますおくだこにゃにゃちわ~(古い)(ケロちゃん)(伝われ)カードキャプターさくら世代の奥田です!(よく調べたら私は再放送世代でした...!)前回のOOCSS編に引き続き、今回はSMACSS編です(⌒▽⌒)【vol.1】有名な3つのCSS設計をまとめてみた〜OOCSS編〜https://blog.triana.jp/?p=1704こんにちは〜〜〜!インターンの奥田です!今日はみんな大好き(?)CSSのお話。triBlogを読んでいる人の中にはWEB制作に携わっている人も多くいるかと思います。そんな人達にとってCSSはとても身近な存在。”設計”に基づいてコーディングしてますか?...CSSを快適に書くためのリーダブルでナウでヤングなCSS設計の世界へ!レッツゴー!!!目次CSS設計とは(おさらい)SMACSSとは特徴カテゴライズ命名規則SMACSSまとめCSS設計とは(おさらい)CSS設計はCSSを快適にするためのルールです。誰が見ても分かりやすく、変更にも対応しやすい。何より書きやすいCSSになります。有名な設計としてOOCSS、SMACSS、BEMがあります。SMACSSとはSMACSSはOOCSSの流れを汲んで提唱された設計思想です。OOCSSと同じマルチクラスで基本的な考え方は一緒です。エスエムエーシーエスエスではなくて安心しました。特徴カテゴライズCSSを5つのカテゴリに分けるのが大きな特徴。大量のCSSを体系的にまとめることで、メンテナンスが楽になります。「inputのスタイルってどこで指定したっけ...。」と、CSSファイルで迷子になる人には特にオススメです。(以前は私もそうでした)SMACSSのカテゴリ分けを覚えて、探しているスタイルをすぐに見つけましょう。Base一度定義したら書き換えることがない場所です。html要素やbody要素に適用するfont-familyや、aタグに適用するcolor、borderなどがあります。ここにreset.cssなどの中身を入れる人もいます。Layoutヘッダー・フッター・メイン・サイドバーなどの大枠のスタイルを入れます。ほかにも、グリッドなどの比較的大きなレイアウトはこっちに入ります。小さいものはあとで出てくるモジュールカテゴリへ。Moduleほとんどのスタイルが入ります。モジュールという名の通り、部品が入ります。ボタンやリンクなどの再利用を前提とした部品です。基本的に他のカテゴリに入らないものはすべてここに入れると思って大丈夫です。State状態を表すスタイルが入ります。静的なページではあまり使わないかもしれませんが、フォームにエラーを出す時にinputタグの枠を赤くするなどの「状態の変化」を表すスタイルを記述します。none;する時とか。Themeダークモードなど、サイト全体のテーマをガラッと変えるときのCSSが入ります。html要素やbody要素にクラスをつけて、background-colorやcolorを変更します。「そんなん言われてもイマイチ想像できない」と思っているそこのあなた。示すとこんな感じです。コメントアウトなどでカテゴリに区切りを示します。{~~~}ステートカテゴリだけは、その状態を表しているスタイルの直下に置くことが推奨されています。関連するものは近くにある方が分かりやすいですからね。「1ページに1度しか出てこないレイアウト」に対してはIDセレクタが容認されています。メインやサイドバー、ヘッダーやフッターなどですね。接頭辞をつけることが推奨されています。(「.l-sidebar」「.is-label-error」など)レイアウトのl、ステートの...なぜかisです。error」的な感じなんですかね。ステートカテゴリのクラス名は.is-label-error、is-button-submitなど、くっつける部品の名前を入れます。これは.is-errorや.is-submitなどと命名すると、他に定義されている.is-errorや.is-submitを汚染してしまう可能性があるからです。「同じクラス名を使ったせいで、思わぬところのスタイルが崩れちゃった...。」っていう悲劇にはもうさようなら。SMACSSまとめSMACSSではIDセレクタを容認していますが、プロパティの詳細度の観点から賛否両論あります。カテゴライズに関してはCSSファイル内での区切りとして非常に有効ではないでしょうか。個人的にはOOCSSとセットでSMACSSのカテゴリ分けを使ってます。【静的サイトジェネレータ】WordPress不要!2020年注目のVuePressの特徴をまとめてみたホームページ制作費が分割払いできます【WEB制作編】2019年の記事を振り返る。インターンインタラクティブ表現とUIを極めたい。自称トリアナの新しい風。常に焦りを感じながら、誰よりも戦略的に成長します。インターンインタラクティブ表現とUIを極めたい。自称トリアナの新しい風。常に焦りを感じながら、誰よりも戦略的に成長します。reserverd.。