CSS OOCSS 방법론

2020-11-10

HTML & CSS / CSS

Object Oriented CSS의 약자이며 Nicole Sullivan에 의해 개발된 프레임워크이다. CSS를 모듈 방식으로 코딩하여 중복을 최소화하는 기법이다.

기본 원칙

구조(structure)와 모양(skin)의 분리: 반복적인 시각적 기능(배경, 테두리 등)을 별도의 “스킨”으로 정의하여 다양한 객체와 혼합한다. 중복 코드 없이 시각적 다양성을 표현할 수 있다.
콘테이너와 콘텐츠의 분리: 스타일을 정의할 때 의존적인 스타일을 사용하지 않는다. 사물의 모양은 어디에 위치하던간에 동일하게 보인다.
- ex. h2에 .title(클래스 이름)을 부여하여 사용하면 클래스가 없는 h2와 .title 클래스 역시 동일하게 보이기 때문에 불필요한 스타일을 중복해서 정의할 필요가 없다.

네이밍 방법

가능하면 짧고 간결하게 작성한다.
동작과 형태가 예상이 가능하도록 명확하게 작성한다.
어떻게 생겼는지보다는 어떤 목적인지 알 수 있도록 의미가 있게 작성한다.
지나치게 구체적이지 않고 일반적으로 사용 가능하도록 작성한다.
종이나 다른 매체가 아닌 모니터를 중심으로 작성한다.

장점

많은 CSS 코드를 재사용하면서 코드 길이가 줄어들기 때문에 CSS 파일 크기가 작아진다. 속도를 향상시킬 수 있다.
새로운 요소를 추가할 때 기존 모듈을 통해서 재사용이 가능하고 쉽게 확장 가능하여 유지보수성이 높아진다.

단점

복잡해지는 HTML이 오히려 유지보수를 어렵게 한다는 의견이 있다.
가독성이 떨어진다.
미디어 객체와 같은 일부 모듈에 적용하기 좋아보이지만 프로젝트 전반적으로 적용하기 어렵다.
non-semantic한 클래스를 사용한다.
Sass와 함께 사용하게 되면 단점을 보완할 수 있다.

REFERENCE