CSS 표기에 관한 순서입니다.

---

🖋 속성 표기 순서

CSS 문서를 작성할 때 속성들을 표기하는 순서를 본인만의 규칙으로 정해보세요.

• 속성의 name: value 순서로 나열되어있습니다.

• 차후 프로젝트를 진행하며 소스들의 규모가 점차 커짐에 따라 순서와 같은 부분도 규칙을 정해놓으면 이해하기 쉬워져 유지보수가 간편해집니다!

• 아래는 어디까지나 저의 개인적인 기준이며, 개인이 보기 편한 순서로 설정하셔도 무관합니다.

Example

box-sizing: border-box
position: relative | absolute | fixed | sticky
display: flex | block | inline-block | block
margin: 100px
padding: 100px
width: 100px
height: 100px
background: #fff
font-size: 16px
font-weight: 300(thin) | 400(normal) | 500(medium) | 700(bold)
color: #000
text-align: center | left | right
overflow: auto | scroll | hidden
z-index: 1

( 저는 CSS 스타일을 작성할 때 위와 같은 순서로 속성을 할당합니다. )

• Cascading에 따라 하단에 같은 속성을 두번 할당하는것을 방지하기 위해 순서를 정해두면 좋을 것입니다.
  ✅ 팀원들과 이런 규칙을 정해두면 더욱 좋겠죠?

---