CSS設計には先人の方が考えたいくつかのアイデアがあります。その一つにOOCSS（Object-Oriented CSS）があります。オブジェクト指向の原則をCSSに適用しています。
基本的な考え方としては下記の二つを挙げています。
①構造と見た目の分離
<button class=”button base-skin”>基本ボタン</button>
<button class=”button alert-skin”>警告ボタン</button>
上記のようなHTMLのコードがあった場合、下記のようなCSSで記述したとします。
/* 構造 */
.button {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
/* 見た目 */
.base-skin {
background-color: blue;
color: white;
}
.alert-skin {
background-color: red;
color: white;
}
buttonクラスでは、基本的なボタンとしての構造は同じなので、一緒のクラスをつけます。
ただし、見た目（カラー）が違うため、見た目はそれぞれ別のクラスをつけています。これにより、スタイルがより、柔軟になり、再利用しやくなります。
②コンテナとコンテンツの分離
<div class=”container”>
<p class=”independent-text”>テキスト</p>
</div>
<div class=”another-container”>
<p class=”independent-text”>テキスト</p>
</div>
上記のようなHTMLのコードがあった場合、下記のようなCSSで記述したとします。
/* コンテナのスタイル */
.container, .another-container {
padding: 10px;
}
/* コンテンツ（テキスト）のスタイル */
.independent-text {
color: blue;
font-size: 16px;
}
この例では、.container と .another-container という異なるコンテナがありますが、.independent-text クラスを持つテキストのスタイルは、どのコンテナに配置されても変わりません。このテキストの色とフォントサイズは一貫しており、異なるコンテナに配置されても同じスタイルが適用されます。
この考え方はBootStrapでも採用されています。今までも自然とできているケースもあれば、あまり、意味も考えずに使っていたので、改めて勉強になります。
