TIL16-CSS

OOCSS (Object Oriented CSS)

레고처럼 여러가지 모듈을 만들어서 조합하도록 하는 방법론

구조(structure)와 스킨의 분리

구조와 스킨을 구별하여 클래스 네이밍 하기!
콘텐츠의 스타일이 컨테이너에 종속되지 않도록함 (분리!)

구조 : width, height, padding, margi 등 레이아웃에 영향을 미치는 속성
스킨 : font관련속성, color, background, border 등 레이아웃에 영향을 미치지는 않지만, 시각적 영향을 주는 속성 포함됨

<button type="button" class="btn">버튼</button>
<button type="button" class="btn btn-close">버튼2</button>

.btn {
    width: 200px;
    height: 80px;
    font-size: 30px;
}

.btn-close {
    background-color: pink;
    color: #fff;
    border: 3px solid palevioletred;
}

SMACSS (Scalable and Modular Architecture for CSS)

css 코드를 역할에 따라 분리한다.

• 역할목록
  1. 베이스 : 프로젝트 표준 스타일 정의
  2. 레이아웃 : 헤더, 메인영역, 푸터, 사이드 바와 같은 웹사이트에서 큰 틀을 구성하는 모듈에 관한 규칙 (대부분 페이지에 몇개 존재하지 않기 때문에 ID 선택자를 사용하기도 함)
  3. 모듈 : 반복되는 요소들이기 때문에 ID 선택자를 사용하지 않음
     비슷한 모듈안에서도 모양이 조금씩 다를 경우 서브클래스를 만듦. (btn-small, btn-long 등등)
  4. 스테이트 : 기존 스타일을 덮어쓰거나 확장하는데 사용하는 스타일
  5. 테마 : 사용자에게 사이트의 느낌을 전달하는 이미지(background-image), 색상(background-color, color … ) 등

BEM (Block, Element, Modifier)