非フロントエンドエンジニアのためのCSS設計入門（OOCSS） - QiitaCSSを書いていて、設計方針がわからない、破綻して!importantをつけざるを得なくなってしまうことがあったため、CSS設計の1つの考え方であるOOCSSについてまとめてみました。 この記事では オブジェクト指向 CSSの詳細度 については説明しません。 OOCSSとは オブジェクト指向CSSのことです。 同じコードを2度書かない どこに書いても同じ振る舞いをする 辺りを目的とした、CSSの設計概念です。2つの原則を用いて、変更に強い設計を目指します。 OOCSSの2つの原則 構造とスキンの分離 同じコードを2度書かないようにするためです。 赤い箱を「赤い」と「箱」に分けます。 そうすることで、青い箱が必要になったときに、「箱」の部分を共通化することができます。 Before .box-red { width: 700px; height: 700px; margin: 0 auto;
