OOCSSとは

OOCSSとはなにか

Object Oriented Cascading Style Sheet(オブジェクト指向CSS

構造とスキンを分離してクラス定義し、それらを組み合わせてスタイルを定義する方法

難しいOOCSS(オブジェクト指向CSS)の設計 | hijiriworld Web

例:Bootstrap

Bootstrapの場合、colで画面サイズに合わせて自由にレイアウトすることができたり、的確なクラス定義によりhtmlの視認性が高くなります。



OOCSSの構造、スキン

  • 構造:width、height、border、font-size、line-heightなどの形状
  • スキン:color、background-color、padding、border-radiusなどの装飾

OOCSSの例

.box {
    width: 100px;
    height: 40px;
    border: 2px solid;
    box-shadow: 0 0 6px #666;
    font-size: 14px;
    text-align: center;
}

.box-info {
    color: #ccc;
    background-color: #fff;
    margin-left: 10px;
}