css 속성을 작성하는 순서도 있다는 것을 알고 있었고, 어느정도 이에 맞게 작성하려고 노력하고 있었는데...
확실하게 알고 정확하게 적용하지는 못했어서, 새로 프로젝트를 진행하는 김에 커밋 메시지 컨벤션, 네이밍 컨벤션, css 순서 컨벤션을 최대한 정확하게 지켜 코드를 작성하는 것을 목표로 했다.
Mozilla에서 제안한 CSS 속성 기술 순서는 다음과 같다.
- display: 객체의 노출여부/표현방식
- list-style
- position
- float
- clear
- width / height
- padding / margin
- border / background
- color / font
- text-decoration
- text-align / vertical-align
- white-space
- other text
- content
위치 선정 > 윤곽 > 외곽 디테일링 > 채색 > 타이포그래피
와 같이 큰 틀에서 디테일을 정의하는 흐름으로 보인다.
조금 더 한 눈에 들어오도록 정리해놓은 것이 있어 첨부한다.
.myClass {
├── 객체의 노출여부와 표현방식
│ ├── display
│ └── list-style
│
├── 위치와 좌표
│ ├── position
│ ├── float
│ └── clear
│
├── 크기와 여백
│ ├── width / height
│ └── padding / margin
│
├── 윤곽과 배경
│ └── border / background
│
├── 글자와 정렬
│ ├── corlor / font
│ ├── text-decoration
│ ├── text-align / vertical-align
│ └── white-space
│
└── 내용
└── content
역시나. 지금까지 작업한 것들은 이 컨벤션과 맞지 않는 부분들이 있다는 게 한 눈에 보인다.
정해진 규칙이 있는 것은 아니라지만, 보편적인 규칙에 맞춰 일관적으로 작성하는 연습을 하는 것이 나중에 실무에서 협업할 때 분명히 도움이 될 테니, 신경을 쓰면서 작업해보자!
Reference
