目次一覧
状態:試行錯誤履歴
閲覧数:4,016
投稿日:2013-03-28
更新日:2019-10-03
OOCSS ／ OOCSS とは？／ 具体例
OOCSS ／ OOCSS とは？／ 具体例
OOCSS
英語表記
Object Oriented CSS
OOCSSとは？
構造とスキンを分離してクラス定義し、それらを組み合わせてスタイルを定義する方法
自分がやろうとしていたことが、「OOCSS」と呼ばれている手法に近いことを知る
ページの部品を「モジュール」という単位で分けて考えることで、サイトのメンテナンス性とパフォーマンスを上げる考え方の一つです。そして、複雑な部品については、このモジュールについて、他のプログラミング言語における、クラス（HTMLのclass属性とは異なる、プログラムにおける雛形の意）の継承の考え方を利用し、効率的に拡張していく…というのが、OOCSSのキモとなる部分であると、僕は捉えています。その実現の方法として、class属性に複数のクラスを当てる手法をとる… ということになります
具体例
基本例
<div class="box box-red"></div>
<div class="box box-blue"></div>
.box {
width: 50px;
height: 50px;
}
.box-red {
border: 1px solid red;
background-color: #FFCCCC;
}
.box-blue {
border: 1px solid blue;
background-color: #66CCFF;
}
構造とスキンに分類する
構造とスキンのセットはサイトによって変化する
※下記はあくまでも一例
width → 構造
height → 構造
font-size → 構造
line-height → 構造
border → 構造（border-colorはスキン）
color → スキン
background-color → スキン
height → 構造
font-size → 構造
line-height → 構造
border → 構造（border-colorはスキン）
color → スキン
background-color → スキン
具体例1
<h1 class="h1">Site Title</h1>
<style>
h1 {
font-size: 18px;
line-height: 24px;
}
.h1 {
color: blue;
}
</style>