css 속성 순서 정하기

오늘 프로젝트를 완성하고나서 css를 살펴봤다.

그런데 css속성들이 일정한 규칙없이 섞여있는걸 볼 수 있었다.

그동안 css 순서를 생각하지 않고 속성을 추가할 때마다 맨아래에 추가해서 그런것이었다.

css 속성에는 정해진 우선순위가 없기 때문에 편한대로 적어도 되지만 같은 컴포넌트안에서도 일관성이 없게 작성되어있어 문제였다.

속성에 순서 정하기

앞에서 말했는 지금까지 내가 작성한 css는 생각나는 속성을 정리를 안하고 그냥 추가하는 식이었다.

순서를 정하고 시작하지 않았는데 작업을 하다가 정하기는 또 귀찮아서 그냥 한 탓이다.

그래서 이번에 순서를 확실히 정해두려고 한다.

순서는 전에 노아님이 말씀하셨듯이 box model의 순서와 아래 블로그글을 참고해서 작성하였다. https://beautifulcss.com/archives/203

1. 표현방식

• display

2. 위치와 좌표

• position

3. 크기와 여백

• width / height
• margin / padding

4. 윤곽과 배경

• border / background

5. 글자와 정렬

• color / font
• text-decoration
• text-align / vertical-align

큰 순서부터 작은 순서로 가도록 작성하였다.

작성하지 않은 속성도 있지만 위의 순서를 큰 틀로 잡고 작성하다보면 복잡해질 일은 없을 것 같다.

앞으로 위에 작성한 순서를 의식하면서 css를 작성해보자