PostCSS Sorting

yesslkim94·2021년 10월 12일
1

ETC

목록 보기
3/7
post-thumbnail

PostCSS

CSS 속성 순서를 정돈해주는 EXTENSION

일관적으로 CSS코드를 작성하는 것을 애정한다🧐💙
그래서 CSS속성을 쓸 때도 속성 순서대로 쓰는 것을 좋아하는데,
다양한 회사에서는 해당 관련해서 코딩 컨벤션이 있을거라 짐작된다.
(아직 취준중이라 느껴보지 못했다 😌)

여튼 VSCode에 PostCSS라고 검색하면 다운받을 수 있다

그 이후, settings.json 파일에서 하단의 코드를 붙여넣으면 된다.

{
  "postcssSorting.config": {
    "order": [
      "custom-properties",
      "dollar-variables",
      "declarations",
      "at-rules",
      "rules"
    ],
    "properties-order": ["display", "position", "top", "right", "bottom", "left"]
  }
}

참고로 properties-order를 통해 본인이 원하는 order를 작성할 수 있다.

참고사항 - Mozilla 속성순서

  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. text-align / vertical-align
  12. white-space
  13. other text
  14. content

참고사항 - NHN 코딩 컨벤션


[출저] NHN코딩컨벤션

profile
웹 퍼블리셔입니다💓

0개의 댓글