[오늘의 학습] 211111

CSS

CSS 설계 기법

OOCSS(Object Oriented CSS)

• 레고처럼 여러가지 모듈을 만들어서 조합하는 방법론
• 구조와 스킨을 분리
  • 구조 : width, height, padding, margin 등 레이아웃 관련 속성
  • 스킨 : font 관련 속성, color, background 등 시각적인 영향을 주는 속성
• 컨테이너와 컨텐츠 분리

 

SMACSS(Scalable and Modular Architecture for CSS)

• CSS 코드를 역할(베이스, 레이아웃, 모듈, 스테이트, 테마)에 따라 분류
  • 베이스 : 표준 스타일 정의(폰트 패밀리, reset CSS 등)
  • 레이아웃 : 큰 틀을 구성하는 태그(header, main, footer 등)에 id 선택자 적용
  • 모듈 : 레이아웃 내 배치된 모든 요소, id 선택자를 쓰지 않는다.
  • 스테이트 : 기존 스타일을 덮어쓰거나 확장시 활용
  • 테마 : 사이트 느낌을 전달하는 요소(배경 이미지, 색깔 등) 정의

 

BEM(Block Element Modifier)

• OOCSS 기법과 비슷하다, id 선택자, 요소 선택자 사용을 권고하지 않음(가중치 계산을 원활히 하기 위해서)
• Block : 재사용 가능한 부품, 명확한 클래스 네이밍, 케밥케이스(하이픈 연결) 작명
• Element : Block을 구성하는 요소, Block을 상속받기 때문에 언더바 두 개를 접두사로 사용하여 이어서 작명
• Modifier : Block, Element 요소의 상태나 움직임을 정의하는 요소, 언더바 한 개를 사용하여 이어서 작명