css선언 순서에 대한 고찰

예전에 웹표준 관련 자료에서 본 것을 토대로 큰것에서부터 세부적으로 css를 적용시키기는 하는데 막상 작업 하다보면 급한대로

정리 안하고 하게 되는듯 갑자기 다른 분들은 어떻게 작업하시나 궁금해서 찾아봤는데

어떤분은 알파벳순으로 정리한다 그러고 레이아웃에 가까운 순서로 작업한다 그러고 대중은 없는듯 

 

▶ 모질라 파이어폭스 css 선언 순서

1. display
2. list-style
3. position
4. float
5. clear
6. width/height
7. padding/margin
8. border/background
9. color/font
10. text/decoration
11. test-align/vertical-align
12. white-space
13. other text
14. content

 

 

▶ NHN 마크업 CSS 선언순서

 

1. 레이아웃	display,  visibility, overflow, float, clear, position, top, right, bottom, left, zindex
2. box	width, height, margin, padding
3. 테두리 / 배경	border, background
4. 글꼴	font,color, letter-spacing, text-align, text-decoration, text-indent, verticalalign, white-space
5. animation
6. 기타	위에 언급안된 나머지 속성, 기타내에 속성 순서는 무관

 

출처 NHN 마크업 코딩 컨벤션

 

 

 

 

▶ github

 

Positioning	position top right bottom left z-index
Box model	display float width height max-width max-height min-width min-height padding padding-top padding-right padding-bottom padding-left margin margin-top margin-right margin-bottom margin-left margin-collapse margin-top-collapse margin-right-collapse margin-bottom-collapse margin-left-collapse overflow overflow-x overflow-y clip clear
Typographic	font font-family font-size font-smoothing osx-font-smoothing font-style font-weight hyphens src line-height letter-spacing word-spacing color text-align text-decoration text-indent text-overflow text-rendering text-size-adjust text-shadow text-transform word-break word-wrap white-space vertical-align list-style list-style-type list-style-position list-style-image pointer-events cursor
Visual	background background-attachment background-color background-image background-position background-repeat background-size border border-collapse border-top border-right border-bottom border-left border-color border-image border-top-color border-right-color border-bottom-color border-left-color border-spacing border-style border-top-style border-right-style border-bottom-style border-left-style border-width border-top-width border-right-width border-bottom-width border-left-width border-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-top-left-radius border-radius-topright border-radius-bottomright border-radius-bottomleft border-radius-topleft content quotes outline outline-offset opacity filter visibility size zoom transform box-align box-flex box-orient box-pack box-shadow box-sizing table-layout animation animation-delay animation-duration animation-iteration-count animation-name animation-play-state animation-timing-function animation-fill-mode transition transition-delay transition-duration transition-property transition-timing-function background-clip backface-visibility resize appearance user-select interpolation-mode direction marks page set-link-source unicode-bidi speak

 

출처 https://gist.github.com/awkale/ad46e2ade70e833fa178#file-css-order-md

 

 

 

검색하다가 css 자동정렬 해준다는걸 찾았다.

csscom b는 node.js가 설치된 환경에서 사용가능 하지만 vscode 설정에서 확장 플러그인 csscom b를 검색해서 설치하고 로드해서 사용가능 vscode 설정은 json파일로 되어있고 개인이 설정한 옵션을 덮어씌워서 적용해줄 수 있다.

 

http://csscomb.com/config

 

위 사이트에서 css 정렬방식 옵션을 지정할 수 있다고 한다. 

 

https://cafe.naver.com/hacosa/235648

 

자세한 내용은 위 사이트에서 확인 가능한데 

댓글 보니까 문제가 조금 있는 듯 하다.