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 요소의 상태나 움직임을 정의하는 요소, 언더바 한 개를 사용하여 이어서 작명
'오늘의 학습' 카테고리의 다른 글
[오늘의 학습] 211113 (0) | 2021.11.13 |
---|---|
[오늘의 학습] 211112 (0) | 2021.11.12 |
[오늘의 학습] 211110 (0) | 2021.11.10 |
[오늘의 학습] 211109 (0) | 2021.11.09 |
[오늘의학습] 211108 (0) | 2021.11.08 |