stylelint로 개발 생산성 높여보세요!

2024-08-04

이 글을 읽고 계시는 여러분은 CSS 코드를 작성할 때 여러분만의 규칙이 있으신가요? 저는 효율적이라고 생각하는 프로퍼티 순서가 있습니다.

최근에 회사 디자인 시스템을 리뉴얼하면서 CSS 프로퍼티 순서 규칙이 꼭 필요하다는 걸 느꼈습니다. CSS 프로퍼티를 정렬하는 것은 개발 효율성을 높이는 데 큰 도움이 됩니다. 모든 코드가 명확한 순서로 정리되어 있으면 가독성이 좋아지고, 원하는 프로퍼티를 찾기가 쉬워지게 되니까 수정할 때 훨씬 편리해집니다.

그럼, 제 말이 진짜인지 아닌지 정렬 규칙이 없는 코드와 정렬 규칙이 있는 코드를 비교하면서 확인해보겠습니다!

정렬 규칙이 없는 코드

1.header {
2  background-color: #333;
3  color: #fff;
4  padding: 15px;
5  z-index: 10;
6}
7
8
9.button {
10  margin: 10px;
11  color: white;
12  background-color: blue;
13  padding: 5px;
14  border-radius: 10px;
15  z-index: 1;
16  height: 50px;
17  width: 100px;
18  border-color: red;
19  font-size: 16px;
20}
21
22.card {
23  padding: 20px;
24  border: 1px solid black;
25  background-color: white;
26  border-radius: 5px;
27  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
28  width: 300px;
29  height: auto;
30  z-index: 2;
31}

정렬 규칙이 있는 코드

1.header {
2  z-index: 10;
3  padding: 15px;
4  background-color: #333;
5  color: #fff;
6}
7
8.button {
9  z-index: 1;
10  width: 100px;
11  height: 50px;
12  margin: 10px;
13  padding: 5px;
14  border-radius: 10px;
15  border-color: red;
16  background-color: blue;
17  color: white;
18  font-size: 16px;
19}
20
21.card {
22  z-index: 2;
23  width: 300px;
24  height: auto;
25  padding: 20px;
26  border: 1px solid black;
27  border-radius: 5px;
28  background-color: white;
29  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
30}

비교해보니까 어떠신가요? 정렬 규칙이 있는 코드가 훨씬 보기 편하다고 느끼실겁니다.

프론트엔드 개발자 중에서는 TypeScript나 React 컴포넌트 클린 코드에 관심이 있으신 분들이 많습니다. 하지만 저만 그렇게 느끼는 것일지는 몰라도, CSS 클린 코드에 대한 관심은 상대적으로 적은 것 같습니다. CSS도 코드 유지보수를 잘 하려면 무시할 수 없는 부분이라고 생각합니다.

이제는 정렬이 안 된 CSS는 도저히 못 보겠어요…!

내가 선호하는 css 프러퍼티 규칙

저희 회사에는 기존에는 규칙이 따로 없었기 때문에 제가 평소에 사용해왔던 규칙을 적용해 보았습니다. 자주 디자인 수정이 발생하는 프로퍼티와 비슷한 것들은 서로 가까이에 두는 게 효율적이더군요.

특히, z-index를 가장 먼저 두는 걸 선호합니다. 프론트 개발을 하다보면 z-index가 얼마나 골치 아픈 녀석인지 느끼실 거예요. 이슈가 생겼을 때 어떤 요소가 위에 오고 아래로 오는지 쉽게 찾을 수 있도록 z-index를 가장 눈에 잘 띄는 위치에 두는 게 좋습니다.

저의 프로퍼티 순서 규칙은 대략 이렇습니다.

1️⃣ z-index

2️⃣ Layout 관련 프로퍼티 (width, height, margin, padding 등)

3️⃣ Border 관련된 프로퍼티 (border-radius, border-color 등)

4️⃣ Color (background-color, color)

5️⃣ Font 관련된 프로퍼티

6️⃣ ETC

이제 프로퍼티 순서 규칙이 정해졌으니, 자동으로 정렬되도록 설정하면 좋겠죠?

아무래도 팀원들에게 이 모든 규칙을 외우라고 하면 욕을 먹게 될 테니까요…

CSS 프러퍼티 자동 정렬 방법

원하는 순서로 CSS 프로퍼티를 정렬하기 위해 stylelint를 사용할 것입니다.

1. 아래 패키지를 설치합니다.

1yarn add --dev stylelint stylelint-config-standard stylelint-order postcss-styled-syntax

2. stylelintrc.json 파일 작성

.stylelintrc.json 파일에 아래와 같이 코드를 작성합니다:

1{
2  "extends": ["stylelint-config-standard"],
3  "plugins": ["stylelint-order"],
4  "customSyntax": "postcss-styled-syntax",
5  "rules": {
6    "no-empty-source": null, // optional
7    "selector-class-pattern": null, // optional
8    "order/order": ["custom-properties", "declarations"],
9    "order/properties-order": [ // <-- 원하는 순서로 작성하시면 돼요!
10      {
11        "groupName": "Layout",
12        "properties": [
13          "z-index",
14          "position",
15          "top",
16          "bottom",
17          "left",
18          "right",
19          "display",
20          "flex-direction",
21          "justify-content",
22          "align-items",
23          "align-content",
24          "flex-shrink",
25          "gap",
26          "width",
27          "max-width",
28          "min-width",
29          "height",
30          "max-height",
31          "min-height",
32          "margin",
33          "margin-top",
34          "margin-bottom",
35          "margin-left",
36          "margin-right",
37          "padding",
38          "padding-top",
39          "padding-bottom",
40          "padding-left",
41          "padding-right"
42        ]
43      },
44      {
45        "groupName": "Border",
46        "properties": [
47          "border",
48          "border-top",
49          "border-bottom",
50          "border-left",
51          "border-right",
52          "border-radius",
53          "border-width",
54          "border-color"
55        ]
56      },
57      {
58        "groupName": "Color",
59        "properties": ["color", "background-color"]
60      },
61      {
62        "groupName": "Visibility",
63        "properties": ["visibility", "opacity"]
64      },
65      {
66        "groupName": "Etc",
67        "properties": ["transform", "cursor"]
68      }
69    ]
70  }
71}

3. vscode에 stylelint 확장을 설치합니다.

4. vscode settings.json에 아래 코드를 추가하여 파일 저장 시 자동 정렬되도록 설정합니다:

1  "stylelint.enable": true,
2  "stylelint.validate": ["tsx", "typescript", "typescriptreact"],
3  "editor.formatOnSave": true,
4  "editor.codeActionsOnSave": {
5    "source.fixAll.stylelint": "explicit"
6  }

짜잔~

개발 생산성을 개선하는 일에는 꼭 그렇게 대단한 기술이 필요한 케이스만 있지는 않습니다. 의외로 조금만 신경을 써도 생산성을 향상시킬 수 있는 경우가 많더라구요. 오늘 소개한 CSS 프로퍼티 정렬 방법도 어렵지 않으니 꼭 활용해 보세요!

이런게 필요 없다고 생각하셨던 분들도 아마 한번 써보시면 다시는 이전으로 돌아가고 싶지 않으실 것이라고 생각합니다. 정말 편리하니까 강력 추천합니다.