[CSS] 권장되는 CSS 속성 선언 순서

css 속성을 선언할 때는 그 쓰임새가 레이아웃과 관련이 큰 것에서 시작하여 레이아웃과 무관한 것 순서로 선언한다.

속성 선언 순서

Layout Properties

(display, visibility, overflow, float, clear, position, top, right, bottom, left, z- index)

Box Model Properties

(width, height, margin, padding)

Visual Properties

(color, background, border, box-shadow)

Typography Properties

(font,color, letter-spacing, text-align, text-decoration, text-indent, vertical- align, white-space)

etc.

(cursor, overflow 등 위에 언급되지 않은 나머지 속성들로 폰트의 관련 속성 이후에 선언하며, 기타 속성 내의 선언 순서는 무관함)

밴더속성과 핵속성은 해당 속성 뒤에 선언한다.

속성 값 축약

축약 전	축약 후	설명
#555555	#555	16진수컬러코드값
---	---	---
#ff4400	#f40	동일한 값으로 이루어진 16진수 컬러 코드값은 세 자릿 수로 축약하여 사용한다. 단, 인터넷 익스플로러 전용 속성인 CSS filter 를 사용했을 경우 축약 속성을 인식하지 못하는 오류가 있기 때문에 속성 값을 축약하지 않는다.
---	---	---
background-position:left center	background-position:0 50%	위치값, 문자로 표현한 위치값은 숫자로 변경한다.
---	---	---
top:0px	top:0	0 의 단위, 속성 값이 0일 경우 단위를 표시하지 않는다.
---	---	---
padding:20px 20px 20px 20px	padding:20px	동일한 속성 값= 상, 우, 하, 좌의 속성 값이 동일하면 축약한다.
---	---	---
margin:0 auto 0 auto	margin:0 auto	“
---	---	---
padding:20px 30px 50px 30px	padding:20px 30px 50px	“
---	---	---
border-color:#ccc #eee #ccc #eee	border-color:#ccc #eee	“

CSS 최적화를 위해 다음과 같이 속성 값을 축약할 수 있다.

권장되는 속성 순서로 사용하면 깔끔하고 보기에 편한 것도 물론이고 유지보수하기에 용이하다.

항상 기억하자! JavaScript 유지보수보다 CSS 유지보수가 훨씬 더 어렵다.