css 설계 실전 가이드
CSS 설계
- 규칙을 확실히 정리하지 않으면 혼자 개발을 수행하게 되므로 코드를 기술하는 방법이 어긋난다.
- 문서화되어 있지 않으면 다른 사람과 협력해서 작업을 수행할 때 코드를 기술하는 방법이 어긋난다.
- 너무 쉽게 생각하기 때문에 애초에 규칙으로서의 역할을 하지 못한다. (critical)
이러 상황을 해결하기 위한 것이 바로 CSS 설계
- 추상화한다.
- 나눈다.
CSS 설계와 디자인 시스템 연동
'추상화 한다', '나눈다'라는 관점에서 아토믹 디자인이라는 방법론을 제창함
atoms -> molecules -> organisms -> templates -> pages
CSS 기본 상세도와 셀렉터
- 단순 셀렉터
- 요소형 셀렉터(타입 셀렉터)
- 전체 셀렉터
- 속성 셀렉터
- 클래스 셀렉터
- ID 셀렉터
- 의사 클래스 (:을 사용한 것)
- 의사 요소 (::을 사용한 것)
- 결합자
- 손자 결합자 (ex: div p)
- 자녀 결합자 (ex: div > p)
- 형제 결합자
- 인접 형제 결합자 (ex: div + p)
- 일반 형제 결합자 (ex: div ~ p)
캐스트캐이딩 기초
- 중요도
- 상세도
- 요소형 셀렉터(의사 요소)
리셋 CSS
ex) 기본 스타일 chrome vs. safari
- font-family: chrome 고딕체 / safari 명조체
- select: chorme 무채색 / safari 파란색
이처럼 브라우저의 기본 스타일이 조금씩 다름
일반적으로 하드 리셋(Hard Reset)이라는 방법과 노멀라이즈(Normalize)라는 방법을 사용
하드 리셋
- 브라우저의 기본 스타일을 활용하지 않는 디자인 프로젝트에 적합
노멀라이즈 리셋
- 노멀라이즈 계열 CSS는 하드 리셋 계열 CSS를 대체한다는 목적을 띠고 있음
- 브라우저 간 차이 혹은 버그를 없애면서 유용한 기본 스타일은 그대로 활용
- 기본 스타일에 가까운 형태로 스타일을 정의할 수 있는 특징
개인적으로 더 선호하는 리셋
p요소를 사용할 때마다 margin을 무시하기 위한, ul요소 안의 li요소를 사용할 때마다 list-style-type을 무시하기 위한 작업을 매번 하기에는 무의미한 코드양이 증가하므로 하드리셋을 주로 사용해왔다. normalize 리셋만으로는 아쉽다.
좋은 CSS 설계의 네가지 목표
- 예측 가능하다.
- 재사용 가능하다.
- 유지 보수 가능하다.
- 확장 가능하다.
1. 예측 가능하다.
- 새로운 스타일링을 추가하거나 기존 스타일링을 업데이트하더라도 자신이 의도하지 않은 위치에 영향을 주면 안됨
2. 재사용 가능하다.
- 기존 부품을 다른 위치에서도 사용하고 싶은 경우에 코드를 일일이 다시 작성하거나 덮어쓰지 않아도 되는 상태
3. 유지보수 가능하다.
- 새로운 모듈이나 기능을 추가, 변경 혹은 배치를 바꿨을 때 기존 CSS에 영향을 주지 않는 형태
4. 확장 가능하다.
CSS 설계 실전과 여덟 가지 포인트
- 특성에 따라 CSS를 분류한다.
- HTML과 스타일링을 느슨하게 결합한다.
- 영향 범위를 지나치게 넓히지 않는다.
- 특정한 콘텍스트에 지나치게 의존하지 않는다.
- 상세도를 지나치게 높이지 않는다.
- 클래스 이름에서 영향 범위를 유추할 수 있다.
- 클래스 이름에서 형태, 기능, 역할을 유추할 수 있다.
- 확장하기 쉽다.