다른 기사에서 OOCSS에 대한 기사를 번역했습니다. 하지만 여기서는 실제로 샘플 코드를 올리고 싶습니다.

CSS의 구현을 할 때는, 평상시부터 기본적으로 OOCSS의 원칙인 「구조와 외형의 분리」 「컨테이너와 컨텐츠의 분리」에 따라 쓰도록 하고 있습니다.

특히 폼 주위에서는 같은 요소에서도 선택 상태에 있는지 여부에 따라 색상이 바뀌거나 삭제 버튼 등의 아이콘을 병치하고 있거나 등 패턴화할 수 있는 것이 많아 OOCSS의 생각이 도움이 되었습니다.

위의 기사에서와 같이 모든 것을 extend 로 조립하는 것을 철저히 하지는 않지만, 가능한 한 모듈로 나눌 수 있는 곳은 잘라서 코드를 쓰고 있습니다.

아래에, 실제로 사용하고 있는 샘플 코드를 올립니다.

실례 1：플레이스 홀더로 「구조와 외형의 분리」

이것은, 플레이스 홀더만으로 「구조와 외형의 분리」를 실천한 예입니다. (하나의 클래스 이름에 대해 정의합니다)

체크 박스의 컬럼의 형상과, 외형의 변화를, 별도의 플레이스 홀더로 정의해 @extend 하고 있습니다.
(플레이스 홀더에 정의된 스타일의 세부 사항은 생략합니다)

「구조」와 「외형」의 역할 마다 플레이스홀더를 구분할 수 있도록 한 예입니다.

//*** Checkbox ***//

.form-checkbox {
  > label {
    @extend %form-column;            // カラムの形状（構造）
    @extend %form-column-unchecked;  // カラムが選択されていないときの配色（見た目）
    @extend %form-column-icon;       // チェック枠の形状と配置（構造）
    &:before {
      background-image: image-url('icn_checkbox.png');
    }
  }
  > input[type="checkbox"]:checked + label {
    @extend %form-column-checked;  // カラムが選択中のときの配色（見た目）
    &:before {
      background-position: 0;
    }
  }
}

.form-checkbox
    = f.check_box name, {multiple: true, checked: false}, 0, nil
    = f.label "#{name}_0", 'こだわらない'

실례 2：확장 클래스에서 「구조와 외형의 분리」

이쪽은, 클래스에 각각 「구조」와 「외형」의 역할을 갖게 한 경우입니다.



베이스 오브젝트와 확장 클래스를 정의해, OOCCS 의 원칙인 「구조와 외형의 분리」를 도입하고 있습니다.



그리고 HTML 로, 이 베이스 오브젝트와 확장 클래스를 조합해 사용합니다.

참고 링크

Sass를 이용한 객체 지향 CSS 사용 (번역)

↑ Sass에서 OOCSS를 도입하는 방법에 대해 작성된 기사를 번역했습니다.

FLOCSS

FLOCSS 참조입니다.