CSS 코드의 품질을 어떻게 관리하나요?

루카스 우사르츠

시니어 Software Engineer

CSS는 보조 매체로 취급되지만 모든 인터넷 애플리케이션에서 중요한 부분을 차지합니다. 최고의 CSS 코드를 제공하기 위해 코데스트에서는 어떤 도구와 모범 사례를 사용하나요?

우리는 품질에 대한 많은 출판물을 찾을 수 있습니다. 코드 다음과 같은 프로그래밍 언어로 작성되었습니다. JavaScript, Java, 루비 등입니다. 디자인 패턴, 자동화된 테스트, 소프트웨어 아키텍처 측면에서 이미 많은 이야기가 오고 갔습니다. 이 모든 출판물에서 CSS는 보조 매체로 취급되지만 모든 인터넷 애플리케이션에서 중요한 부분을 차지합니다.

이 글에서는 고객에게 제공하는 프로젝트의 품질을 항상 최고로 유지하기 위해 코데스트에서 사용하는 도구와 모범 사례에 대해 설명합니다.

SCSS 전처리기

소규모 애플리케이션의 경우 CSS 코드를 작성하는 것으로 충분합니다. 대규모 애플리케이션을 다루는 경우 프로젝트를 사용하면 유사한 HTML 객체에 대한 코드를 여러 곳에서 여러 번 반복할 필요가 없습니다. SCSS 전처리기는 변수, 함수 및 소위 믹스인을 사용하여 코드를 보다 체계적이고 깔끔하게 만들 수 있도록 도와줍니다.

다음 목록에는 "반복하지 않기" 원칙을 충족할 수 있는 믹스인 예시가 포함되어 있습니다:

믹스인 플렉스 센터 {
  디스플레이: flex;
  정렬 항목: 가운데
  justify-content: 가운데
}

이 믹스인을 사용하여 코드를 작성할 수 있습니다:

.item-a {
  디스플레이: flex;
  정렬 항목: 가운데
  justify-content: 가운데
  ...
}

.item-b {
  display: flex;
  align-items: center;
  justify-content: 가운데
  ...
}

보다 간결하고 깔끔한 방식으로:

.item-a {
  @include flex-center;
}

.item-b {
  @include flex-center;
}

BEM 방법론

BEM 방법론은 재사용 가능하고 확장 가능한 모듈식 CSS 코드를 생성할 수 있는 간단한 명명 규칙입니다. Codest의 일부로서 VueJS 컴포넌트를 스타일화하는 데 사용합니다. 하나의 블록을 포함하는 단일 .scss 파일이 단일 .vue 컴포넌트에 할당되는 방식으로 코드를 구성하려고 합니다. v-page-header.vue 컴포넌트의 스타일을 예시로 설정할 수 있습니다.

.page-header {
  &__title {
    font-size: 2.0rem;
    색상: $색상-검정;
    배경: $색-흰색;
  }

  &__logo {
    background: url('/images/background.png') no-repeat 0 0;

    &--vertical {
      background: url('/images/background-2.png') no-repeat 0 0;
    }
  }
}

유틸리티 클래스

BEM 방법론으로 작업하는 동안 텍스트의 굵은 부분과 같은 매우 간단한 작업을 수행하려면 인위적인 CSS 클래스 이름을 만들어야 한다는 사실을 알게 되었습니다:

.page-header {
  &__bolder-item {
    글꼴 무게: 굵게
  }
}

이 문제를 해결하기 위해 부트스트랩 프레임워크의 소스 코드에 사용되는 "유틸리티" 클래스에서 영감을 얻었습니다. 덕분에 Vue/HTML 템플릿의 코드에서 다음 유형을 사용할 수 있습니다:

<div>
  <span class="text-bold">콘텐츠</span>
</div>

코드의 정적 분석

투명하고 일관된 구조를 가진 코드로 작업하면 새로운 기능을 쉽게 수정하고 추가할 수 있다는 사실을 누구에게나 설득할 필요가 없습니다. 기존 코드 조각으로 작업을 시작하는 사람이라면 누구나 금방 찾을 수 있는 것이 중요합니다. 그러나 프로그래머는 다른 사람이 이해하지 못하는 자신만의 습관을 가지고 있는 경우가 많습니다. 팀 멤버가 될 수 있습니다. 그렇기 때문에 코드 검사를 자동화할 수 있는 도구를 사용하는 것이 매우 중요합니다. Codest의 일부로 미리 정의된 규칙 집합이 포함된 SCSS 코드를 자동으로 분석하는 SCSS-LINT 도구를 사용합니다. 프로젝트에서 가장 흥미롭고 가장 제한적인 규칙 중 하나는 단일 SCSS 클래스 내에서 속성의 적절한 순서를 보장하는 PropertySortOrder 규칙일 수 있습니다.

SCSS 코드의 다음 두 부분을 상상해 보세요:

.item-a {
    글꼴 크기: 14px;
    색상: #FF00FF;
    여백 상단: 10px;
    글꼴 무게: 굵게;
    배경색: #00FFFF;
    padding: 5px;
    margin-bottom: 10px;
}

.item-b {
    글꼴 크기: 18px;
    padding: 3px;
    background-color: #00FFFF;
    margin-bottom: 4px;
}

그리고:

.item-a {
  여백: 10px 0;
  padding: 5px;
  background-color: #00FFFF;
  색상: #FF00FF;
    font-size: 14px;
    글꼴 무게: 굵게;
}

.item-b {
  margin-bottom: 4px;
  padding: 3px;
  배경색: #00FFFF;
    font-size: 18px;
}

두 구절 모두 맞지만 두 번째 구절이 더 가독성이 높습니다. 여백 및 패딩과 같은 관련 속성이 함께 그룹화되어 있습니다.