[신입19] VSCode - CSS 속성 정렬

항상 생각하지만 나는 정말 효율적인 방법을 찾기 위해 비효율적인 시간을 보내는 타입이다. 방법을 찾을 시간에 일했으면 더 잘했을 거라고 말하면 할 말이 없지만 이런 과정이 재밌고 방법을 찾았을 때의 성취감이 너무 좋고 뿌듯하다.
오늘도 회사에서 시간이 있어서 VSCode의 확장 프로그램을 정리하는 시간을 가졌다. 좋다는 얘기를 들어서 설치는 해놨지만, 막상 사용하지 않는 프로그램은 사용해보고 더 좋은 확장 프로그램이 있으면 추가로 설치했다.

그러다 우연히 마음에 드는, 지금껏 원하던 기능의 확장 프로그램을 발견했다.

🗂 PostCSS Sorting

작성해놓은 CSS의 속성들을 지정한 순서대로 정렬하는 기능을 가진 확장 프로그램이다. 작업할 때(특히 협업할 때) CSS 속성을 항상 일정한 순서대로 작성하면 좋겠다고 생각했고 나름 맞춰서 작성하려고 노력했다. (회사에 오면 이런 규칙이 있을 줄 알았는데 없었다. 프로젝트의 규모가 작아서 굳이 필요하지 않긴 하지만 좀 아쉽다.)

🚦 CSS 순서

우리 회사에는 코딩 컨벤션이 없지만 큰 기업에서 정리해놓은 CSS 선언 순서를 참고했다.

참고: css선언 순서에 대한 고찰

⚙ Setting

순서를 정했으면 세팅에 넣어주면 된다. 세팅 후에 이 확장프로그램을 실행시켜주면 CSS 속성들이 내가 세팅한 대로 정렬된다.

"postcssSorting.config": {
  "properties-order": ["display", "list-style", "position", "top", "right", "bottom", "left", "float", "clear", "width", "height", "padding", "margin", "border", "background", "color", "font", "font-weight", "font-size", "line-height", "font-family", "letter-spacing", "text-decoration", "text-align", "verticla-align", "white-space", "content", "animation"]
}

---

참고: hudochenkov/postcss-sorting