CSS 속성 정렬 방법

대충 생각했던 내용을 뉴스레터에서 마침 누가 정리한 글을 보았다. https://pyx.space/post/keys-to-maintainable-css-order

.button {
    position: relative;
    z-index: 99900001;

    display: inline-flex;
    margin: 1rem 0;
    padding: 0 0.5rem;

    background: #3f55aa;
    border-radius: 0.5rem;
    border: 1px solid white;
    color: white;
    transition: opacity 100ms ease;

    font-family: sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
}

그런데… From a quick glance. “다음과 같은 이점을 빠르게 확인할 수 있다.” 는 말을 영어로 저렇게 아무렇지 않게 쉽게 툭 한다는것에 놀라웠다. 🙉 아무튼 이점은 엘리먼트 속성을 알아보기 쉽고 속성을 추가하거나 삭제가 용이하다는 점이었다.

이런 순으로 정렬이 되었다.

  1. Layout: 위치. position, top, z-index 같은 거.
  2. Box: 박스 모델을 결정짓는 요소들. display, overflow, box-sizing 같은 거.
  3. Visual: 디자인적인 요소. color, border, background 같은 거.
  4. Type: 글꼴 관련 요소. font-family, text-transform 같은 거.

트위터 댓글에 어떤 사람은 글꼴이 박스의 사이즈에 영향을 미칠 수 있어서 글꼴관련 요소를 먼저 선언하고, 디자인적인 요소를 정렬한다고 한다. 나도 이렇게 하는게 더 좋은 것 같다는 생각을 했는데, 그렇게 되면 2번 박스 요소에 border 속성도 추가되는게 좋을 것 같다.

결국 나는 요렇게 써야지~

  1. Layout: 위치. position, top, z-index 같은 거.
  2. Box: 박스 모델을 결정짓는 요소들. display, overflow, border, box-sizing 같은 거.
  3. Type: 글꼴 관련 요소. font-family, text-transform 같은 거.
  4. Visual: 디자인적인 요소. color, background 같은 거.
css