エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
非フロントエンドエンジニアのためのCSS設計入門(OOCSS) - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
非フロントエンドエンジニアのためのCSS設計入門(OOCSS) - Qiita
CSSを書いていて、設計方針がわからない、破綻して!importantをつけざるを得なくなってしまうことがあっ... CSSを書いていて、設計方針がわからない、破綻して!importantをつけざるを得なくなってしまうことがあったため、CSS設計の1つの考え方であるOOCSSについてまとめてみました。 この記事では オブジェクト指向 CSSの詳細度 については説明しません。 OOCSSとは オブジェクト指向CSSのことです。 同じコードを2度書かない どこに書いても同じ振る舞いをする 辺りを目的とした、CSSの設計概念です。2つの原則を用いて、変更に強い設計を目指します。 OOCSSの2つの原則 構造とスキンの分離 同じコードを2度書かないようにするためです。 赤い箱を「赤い」と「箱」に分けます。 そうすることで、青い箱が必要になったときに、「箱」の部分を共通化することができます。 Before .box-red { width: 700px; height: 700px; margin: 0 auto;