항상 CSS를 쓸 때마다 궁금했던 점을 이번 기회에 해결하자 싶어서 CSS code convention을 찾아보았다. 가독성과 통일성을 위해서도 그렇지만 일단 한번 거슬리니까 도저히 지나칠 수가 없던 게 가장 크다..
정렬 방법에 정답은 없으니 일단 여러 레퍼런스를 찾아본 뒤에 권장하는 순서를 기준으로 내가 보기 편한 순서를 정하려고 한다. 그리고 정한 순서를 vscode 확장 프로그램을 사용하여 단축키로 정렬하는 법까지 알아보려고 한다.
궁금했던 점
-
공식 규칙 유무
-
작성 순서의 전체적인 흐름(그룹) 여부와 기준
-
display, position, float 간의 순서
-
specific한 속성 간의 순서
ex) font에서 font-size, font-weight, … / background에서 background-position, background-size, ….
CSS 속성 순서
공식적인 규칙 유무
공식적인 규칙은 없으나 대체적으로 관련 속성끼리 작성하는 경우가 많은 편으로 나타난다. 하지만 랜덤으로 작성하는 사람 수 또한 꽤 되는 걸로 보아 정말 혼돈의 CSS인 것… 또한 알파벳순으로 정렬하는 사람도 꽤 많다는 것도 신기했다. 그럼 너무 헷갈리지 않나? 하는 생각이 들어서 좀 찾아봤는데 알파벳 순으로 정렬하는 이유를 조금은 알 수 있었다. 중복 코드를 잡기 위해서라는 나름 합리적인 이유었다는 게 충격…
자세한 내용은 아래 영상을 보면 더욱 자세히 알 수 있다.
Improve your CSS by organizing your properties
아무튼 관련 속성끼리 분류한 뒤 전체적인 작성 흐름 먼저 파악하기로 했다.
CSS 속성 분류하기
대충 이렇게 분류할 수 있을 것 같다.
- 레이아웃
- 각 요소의 의 크기 및 구조와 관련 있는 속성
- 배경
- 폰트
- 요소의 동작과 관련 있는 속성
- etc.
전체적인 작성 흐름
분류를 마친 뒤 전체적인 작성 흐름을 확인했다. 각 레퍼런스마다 조금씩 순서가 다르기 때문에 네이버에서 제공하는 NHN 코딩 컨벤션을 주로 참고했다.
속성을 선언할 때는 그 쓰임새가 레이아웃과 관련이 큰 것에서 시작하여 레이아웃과 무관한 것 순서로 선언한다. 관련 속성은 대표되는 속성 다음으로 선언하며 아래 표기된 의미 순서대로 선언한다.
layout → box → background → font → etc.
layout 레이아웃
display, visibility, overflow, float, clear position, top, right, bottom, left, z-index
BOX
width, height, margin, padding, border
배경
background
폰트
font, color, letter-spacing, text-align, text-decoration, text-indent, vertical-align, white-space
기타
위에 언급되지 않은 나머지 속성들로 폰트의 관련 속성 이후에 선언하며, 기타 속성 내의 선언 순서는 무관함
display, position, float
사람에 따라, 상황에 따라 순서가 바뀔 때도 있고 어떤 하나의 순서를 따르기 어려운 속성인 것 같아 일반적인 흐름은 position → float → display로 작성하되, 예외적인 상황을 고려하기로 한다.
- absolute나 fixed를 사용하는 경우 position 먼저 작성 → 해당 속성값의 경우 일반적인 DOM flow에서 벗어나기 때문에 브라우저에 해당 사항을 알 수 있도록 명시한다.
- relative나 sticky을 사용하는 경우 float 먼저 작성
- none을 사용하는 경우 display 먼저 작성
이 글을 참고했다. 관심있다면 한번쯤 읽어보는 것을 추천한다!
Better Ways to Organise CSS Properties
세부 속성 작성 순서
font나 background와 같이 단축 속성을 작성하지 않을시 단축 속성 작성 순서를 규칙으로 한다. 사실 딱히 마음에 드는 순서나 이런 걸 발견하지 못했고 이렇게 작성하면 단축 속성으로 전환시 효율적이라고 판단했다.
VSCode 확장 프로그램으로 자동 정렬하기
본인만의 작성 순서를 만들었다면 Postcss sorting의 자동 정렬 기능을 활용해보자.
설치에 대한 아래 글에 자세하게 나와있다.
현업에서 사용중인 CSS 작성 순서와 쉽게 자동 정렬하기(VScode 확장프로그램)
설치하고 사용해보니 부분 정렬이 어려운 점을 제외하면 전반적으로 만족스러운 기능이었다. 다만, display, position, float 등 몇몇 속성을 상황에 따라 순서를 다르게 작성할 거기 때문에 개인적으로 만들 작업이나 자유도가 높은 프로젝트에 우선으로 사용하고 있다.
CSS 속성 작성 순서는 엄격하게 지켜야 하는 규칙이 아니라 컨벤션 즉, 암묵적인 규칙이기 때문에 적당히 참고하여 본인의 상황에 맞게 적용하는 것을 추천한다.
참고한 사이트
How to organize CSS @ 9elements
CSS 속성 순서 | Today Yurim Learned
Poll Results: How do you order your CSS properties? | CSS-Tricks
Better Ways to Organise CSS Properties
