CSS에서 해야 할 8가지

클린 코드란?

이 용어는 개발자에게 다른 의미를 가질 수 있습니다. 따를 수 있는 몇 가지 모범 사례가 있지만 깨끗한 코드에 대한 정확한 정의는 없습니다.

하지만 내가 배우고 읽은 바에 따르면 이것이 바로 깨끗한 코드입니다.

Clean code is code that is easy to understand, straightforward and consistent, therefore it would be reusable and refactorable.

이것은 개발자로서 대부분의 경우 다른 개발자와 협력하므로 팀의 모든 사람이 우리 코드를 쉽게 이해할 수 있도록 해야 하기 때문에 중요합니다.
이제 CSS에서 깔끔한 코드를 작성하기 위해 무엇을 해야 하는지 살펴보겠습니다.

1. 의미 있고 자기 설명적인 이름 쓰기

의미 있고 자체 설명적인 이름을 사용해야 합니다. BEM , OOCSS , SMACSS , Atomic CSS 등 여러 가지 명명 규칙이나 방법론을 따를 수 있습니다.

2. CSS 전처리기 선호

CSS 전처리기를 사용하면 변수, 중첩 규칙, 인라인 가져오기, 접두사 등과 같은 것을 사용할 수 있습니다.
여러 CSS 전처리기가 있으며 SASS , LESS , PostCSS 등을 선택할 수 있습니다.

CSS 전처리기는 우리가 팀과 함께 작업할 때와 앱이 더 커질 때 매우 편리하며, 선택한 명명 규칙과 결합하여 CSS에서 반복을 방지하는 데도 도움이 될 수 있습니다.

3. 모듈식 CSS 작성

더 쉬운 유지 관리를 위해 CSS 파일을 모듈로 분할해야 합니다. SASS를 사용하는 경우 아키텍처7-1 pattern를 따를 수 있습니다.

4. 속기 속성 사용

CSS 약칭을 사용하여 더 간단한 방법으로 CSS를 작성하십시오. 테두리, 여백, 패딩, 배경, 글꼴 등에 대한 약어를 사용할 수 있습니다.

예를 들어, 이것은 속기 속성 없이 CSS에서 테두리를 만드는 방법입니다.

.border {
  border-width: 1px;
  border-style: solid;
  border-color: #aeaeae;
}

약식으로 이것을 리팩토링할 수 있습니다.

.border {
  border: 1px solid #aeaeae;
}

5. 유연한 CSS 선택기 작성

CSS 선택기를 작성할 때 너무 구체적으로 작성하지 마십시오. 그렇지 않으면 덮어쓰기가 어려울 수 있습니다. 선택자에서 낮은 특이성을 유지해야 합니다.

요소 선택기( h1 , h2 , p )를 사용하여 프로젝트의 기본 타이포그래피에 대한 스타일을 작성할 수 있습니다.

네이밍과 관련하여 일반 CSS 이름은 재사용을 목적으로 하는 낮은 특이도로 클래스를 정의하는 데 좋습니다. 예: .container , .shadow-md , .shadow-lg .

6. !중요한 것을 피하십시오

모든 CSS 선택기 중 가장 높은specificity 선택기를 가지며 재정의하려면 다른 선택기!important와 다른 선택기!important 및 다른 선택기가 필요합니다. 이것은 CSS를 유지 관리하기 어렵게 만듭니다.
이를 방지하기 위해 어떠한 경우에도 !important는 가급적 사용을 자제해주시기 바랍니다.

7. CSS 스타일 가이드 따르기

명명 규칙 외에도 유지 관리 가능한 CSS를 만드는 데 도움이 되는 CSS 스타일 가이드가 있습니다. 가장 유명한 것은 Airbnb styleguide 입니다. 스타일 가이드를 BEM 또는 OOCSS와 결합하는 것이 좋습니다.

8. 코드 포맷터 도구 사용

Prettier이라는 코드 포맷터 도구를 사용하여 팀의 기본 설정에 따라 코드를 자동으로 포맷할 수 있습니다. 버그 방지를 위해 ESlint과 같은 린터와 통합할 수도 있습니다.

주요 내용

귀하와 귀하의 팀이 결정한 사항에 대해 일관성을 유지합니다. 그리고 다른 프로그래밍 언어와 마찬가지로 코드를 DRY(Don't Repeat Yourself) 및 KISS(Keep It Simple Stupid)로 유지하십시오.

참조

https://www.sitepoint.com/golden-guidelines-for-writing-clean-css/

https://levelup.gitconnected.com/writing-your-css-like-this-will-make-your-code-super-clean-f82d4bfeb468

읽어 주셔서 감사합니다!
Javascript 클린 코드에 대해 더 알고 싶다면 다음 페이지로 이동하십시오.

댓글로 여러분의 생각과 피드백을 공유해 주시면 정말 감사하겠습니다 ✨