Programming/HTML, CSS

[CSS] 속성 선언 순서

리버김 2023. 11. 12.

목차

    CSS 속성의 선언 순서를 스스로 정리해 본 적이 없는 것 같아 네이버의 CSS 코드를 참고해 정해 보았다. 평소 best practice나 클린 코드 관련 글들에서 읽은 것과 결이 같아 좋은 기준이 될 것 같다.
    1. display - 표시(관련 속성: visibility)
    2. overflow - 넘침
    3. float - 흐름(관련 속성: clear)
    4. position - 위치(관련 속성: top, right, bottom, left, z-index)
    5. width & height - 크기
    6. margin & padding(그룹) - 간격
    7. border(그룹) - 테두리
    8. background(그룹) - 배경
    9. font(그룹) - 폰트(관련 속성: color, letter-spacing, text-align, text-decoration, text-indent, vertical-align, white-space 등)
    10. animation - 동작(관련 속성: animation, transform, transition, marquee 등)
    11. 기타 - 위에 언급되지 않은 나머지 속성들로 폰트의 관련 속성 이후에 선언하며, 기타 속성 내의 선언 순서는 무관함.

    [CSS] 속성 선언 순서

    댓글