CSS의 가독성은 어떻게 높일 수 있을까? 단순히 Prettier를 통해 코드 포맷 스타일을 유지하면 끝일까? 내가 중점으로 보고 싶었던 것은 CSS에서 클래스 이름과 들여 쓰기와 상관없이 중괄호 내에 선언되는 프로퍼티들의 순서를 어떻게 정할 것인가?이다. MDN, code guide등의 해외 공식 문서들을 살펴보며 어떻게 정할 것이며, 왜 그렇게 순서를 지키는 것이 좋을지 그리고 CSS를 코드의 관점으로 보고 가독성을 지켜야 되는 이유에 대해 말해보겠다.
CSS 프로퍼티 나열 방식에 대한 여러 방법론(Randomly, Grouped by Type, By line length, Alphabetical..)이 존재하지만, 오늘 포스팅할 내용은 타입에 의한 분류법이다.
선언 순서는 단 하나의 원칙에 따라서만 작성할 것, 타입에 의한 분류법은 관련된 프로퍼티끼리 그룹화하고, 구조적으로 중요한 프로퍼티를 우선으로 선언한다. 레이아웃과 관련 있는 것부터 선언한 후 무관한 것 순으로 나열된다.
CSS 렌더링 순서와 연관하여 생각해보았다. CSS에서의 가독성이란 코드를 보고 어떻게 그려질지 떠올릴 수 있게 하는 것이 목표일 것, 웹이 그려가는 방식대로 코드만 보고도 충분히 머릿속으로 그릴 수 있어야 될 것이다. CSS의 속성을 배우는 것은 각 메타포가 어떻게 계산되고 어떻게 그려지는지 배우는 것!
CSS 렌더링 시스템
렌더링은 특정 데이터나 상태에서 원하는 형식으로 표현하는 것, 그래픽스 분야에서 렌더링의 기본 전략은 영역을 확보한 뒤 그 영역을 각각 채워가는 방식이다. 사람이나 기계가 보다 인식하기 쉽거나 목적에 부합하는 방식으로 바꾸는 것을 렌더링이라 부른다.
Geometry Calculate (reflow)
렌더링 절차에서 우선적으로 실행되는 것은 그려야할 영역을 계산하는 것이다. 레이아웃, 영역을 확보하는 과정이다.
Fragment-Fill(repaint)
Geometry 영역에 있는 픽셀을 Fragment라고 한다. 각 나눠진 영역에 그림을 그리는 과정.
Declaration order 선언 순서
속성 선언은 다음 순서로 그룹핑한다.
- Positioning (포지셔닝)
- Box model (박스 모델)
- Typography (타이포그라피)
- Visual (시각 효과)
- Misc (기타)
위치 지정은 가장 먼저 다루어진다. 위치 지정은 element를 일반 문서 흐름에서 제거하고 박스 모델 관련 스타일을 덮어쓸 수 있기 때문이다. 박스 모델(flex, float, grid, table의 여부와 관계없이)은 컴포넌트의 크기, 위치 및 정렬을 지시하므로 그다음으로 따른다. 나머지 요소들은 컴포넌트 내부에서 처리되거나 이전 두 섹션에 영향을 미치지 않고 진행되므로 마지막에 위치한다.
.declaration-order {
// Positioning
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
// Box model
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
// Typography
font: normal 14px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
text-decoration: underline;
// Visual
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
// Misc
opacity: 1;
}
1. Positioning (layout)
속성을 선언할 때는 그 쓰임새가 레이아웃과 관련이 큰 것에서 시작하여 무관한 것 순으로 선언한다. 관련 속성은 대표되는 속성 다음으로 선언하며, 아래에 표기된 대로 선언한다.
- position
- z-index
- top
- right
- bottom
- left
2. Box-model
이 범주에 속하는 속성들은 밖에서 안으로 향하는 순서(From Outside In)로 나열한다.
- display
- flex
- justify-content
- align-content
- width & height
- margin & padding
- visibility
`border`를 `border-radius` 근처에 두고 Visual 섹션 아래에 둔 이유?
`border` 는 박스 모델의 일부이지만, 대부분의 시스템에서 전역적으로 박스 크기(box-sizing)를 보더 박스(border-box)로 재설정하여 보더 너비(border-width)가 전체적인 크기에 영향을 미치지 않도록 하기 때문이다. 또한 색상도 함께 선언하는 경우가 많기 때문에 Color 범주로 포함시킨다.
3. Typography
- font, color
- text-align
- text-decoration
- letter-spacing
- white-space
- word-break
- overflow
4. Visual
- background
- border
- transition
- transform
4. MISC
- opacity
전처리기 믹스인(mixins)과 함수들은 가장 적절한 위치에 나타나야 한다. 예로 `border-top-radius` (mixin) 은 border-radius 속성 대신 해당 위치에 들어가야 하며 `responsive-font-size()` 함수는 font-size 속성 대신 해당 위치에 들어가야 한다.
위에 언급되지 않은 나머지 속성들로 폰트의 관련 속성 이후에 선언하며, 기타 속성 내의 선언 순서는 무관함
밴더속성과 핵속성은 해당 속성 뒤에 선언! 하지만 최신 브라우저들은 벤더 접두사를 덜 사용하고 웹 표준을 더 잘 준수하며, 핵 속성 또한 줄어들고 있다. 유지 보수가 어려워질 수 있으니 지양하자.
타입에 의한 분류법이더라도 회사마다, 각 개발자의 관점마다 또 달라질 수 있다. 정답은 없으니 스스로에게 맞는 방법을 찾아봐도 될 것 같다. 중요한 것은 최대한 비슷한 것끼리 묶어 새롭게 투입된 개발자가 보더라도 잘 습득할 수 있는 컨벤션이면 된다.
왜 지켜야 할까? 이점?
- 레이아웃 관련 스타일을 일정한 순서로 선언하면, 브라우저가 계산을 더 빠르게 처리할 수 있다.
- 유사한 속성을 그룹화하고 중복을 최소화하면, 브라우저가 스타일 계산을 더 효율적으로 할 수 있다.
- 코드베이스 전반의 일관성을 지킬 수 있다.
- 개발자가 코드베이스 전반에 걸쳐 친숙함을 느낄 수 있다.
- 생산성이 향상된다.
- 새로 투입된 개발자와 협업이 원활해진다.
가이드라인은 의견에 따라 달라질 수 있다. 모든 규모의 프로젝트에서 수년에 걸쳐 반복적으로 시도하고, 테스트하고, 강조하고, 다듬고, 깨뜨리고, 리팩터링 하며 다시 검토한 결과로 이루어진다.
선언 순서와 렌더링 방식과 연결 짓다 보면 직관적이고 명확해진다. 물론 이외에도 고려할 것은 많겠지만 말이다.
'CSS' 카테고리의 다른 글
| CSS BEM 방법론, 가독성에 대하여 (0) | 2023.09.05 |
|---|