[CSS] 속성 선언 순서

🌱 속성 선언 순서

CSS 문서의 가독성과 팀원들과의 협업을 위해 개인 또는 팀만의 규칙을 지키며 속성과 클래스명을 선언하는 것은 중요한 습관입니다.

속성을 선언할 때 반드시 지켜야 하는 순서는 없지만, 일반적인 순서는 존재합니다.

 

세세한 순서를 지키기보다 전체적인 틀을 생각하며 작성한다면

가독성 있는 문서를 작성할 수 있으며, 유지보수 시에 필요한 속성을 금방 찾아낼 수 있습니다.

 

개략적인 선언 순서는 다음과 같습니다.

1. 시각적/레이아웃
2. 박스 모델
3. 배경
4. 폰트 및 텍스트
5. 사용자 인터페이스
6. 그밖의 속성들

 

---

 

세부적인 선언 순서는 다음과 같습니다.

1. 시각적/레이아웃
   
   1. overflow
   2. visibility
   3. display
   4. position
   5. top/right/bottom/left
   6. float
   7. clear
2. 박스 모델
   1. width
   2. height
   3. margin
   4. padding
   5. border
   6. box-shadow
3. 배경
   1. background
4. 폰트 및 텍스트
   1. font
   2. text-align
   3. vertical-align
   4. letter-spacing
   5. word-spacing
   6. word-break
   7. word-wrap
   8. white-space
   9. text-indent
   10. text-decoration
   11. text-transform
   12. text-overflow
   13. text-shadow
   14. color
5. 사용자 인터페이스
   1. outline
   2. cursor
   3. opacity
6. 위에서 언급되지 않은 그밖의 속성들

 

---

🌱 순서를 꼭 지켜야 하는가

속성 선언 순서를 반드시 지켜며 작성해야 한다는 코딩법(?)은 없습니다.

따라서 위의 순서를 모두 지킬 필요는 전혀 없습니다.

 

위의 방법은 통일된 규칙으로 문서를 작성하고 싶지만, 감이 잡히지 않을 때 사용할 수 있는 하나의 보편적 기준입니다.

세부적인 순서는 달라도 개략적인 순서대로 그룹을 만들어 속성을 작성하면 좀 더 가독성 있는 문서를 작성할 수 있을 것입니다.

중요한 점은 어떤 방법을 선택하느냐가 아닌 '통일된 기준'을 가지고 코드를 작성해야 한다는 것입니다.

회사 및 팀마다 다른 규칙을 가지고 있을 수 있으므로 상황에 맞게 통일된 기준으로 문서를 작성하면 됩니다.

 해당 링크에서 NHN Coding Convention, Naver, 그리고 Daum의 속성 선언 순서를 살펴볼 수 있습니다.

 

 

마지막으로 CSS 속성 선언 순서를 궁금해 하고 직접 검색해 보신 분들이라면, 이미 충분히 가독성 있고 체계적인 문서를 작성하고 있을 것이라고 생각됩니다.

그러니 규칙을 꼭 지켜야 한다는 생각에 얽매이지 않으셨으면 좋겠습니다☺️

 

---

 

읽어주셔서 감사합니다:)