스타일 간소화: 유지 관리 가능한 코드를 위한 CSS 변수-CSS 튜토리얼-php.cn

스타일 간소화: 유지 관리 가능한 코드를 위한 CSS 변수

王林

풀어 주다： 2024-08-22 08:32:03

원래의

882명이 탐색했습니다.

다음은 CSS 변수가 재사용 가능하고 사용자 정의 가능한 구성 요소 지원을 단순화하는 방법에 대한 몇 가지 통찰력입니다. 사용 중인 프레임워크에 관계없이 이 접근 방식은 프레임워크에 구애받지 않습니다.

샘플 구성요소

UI 키트에 Progress Bar 구성 요소를 추가해야 한다고 가정해 보겠습니다. React를 예로 들어 간단하게 구현해 보겠습니다.

import "./ProgressBar.css";

export function ProgressBar({percentage} : {percentage: number} ){
  return ( 
    <div className="progress-bar">
      <div className="fill"
        style={{ width: percentage + "%"}}
      />
    </div>
  )
}

로그인 후 복사

그리고 색상과 기본 규칙을 추가하는 CSS

.progress-bar{
  width: 200px;
  height: 20px;
  border: 1px solid black;
}

.progress-bar .fill{
  height: 100%;
  background: black;
}

로그인 후 복사

기본은 검정색인데 이렇게 생겼어요

Streamlining Styles: CSS Variables for Maintainable Code

구성요소는 내 앱의 다양한 부분에서 재사용되어야 합니다. 나는 각 소비자가 자신의 특정 요구 사항과 색 구성표에 맞춰 막대와 테두리의 색상을 유연하게 맞춤 설정할 수 있어야 한다고 기대합니다.

소비자가 기본 색상을 재정의하기 위해 자체 CSS 규칙을 제공할 것으로 기대합니다. 예를 들어, 소비자는 다음 CSS를 작성하여 업로드 섹션 내 진행률 표시줄을 녹색으로 만들 수 있습니다.

#upload .progress-bar{
  border-color: green
}
#upload .progress-bar .fill {
  background-color: green;
}

로그인 후 복사

이 사용자 정의는 예상대로 작동합니다.

Streamlining Styles: CSS Variables for Maintainable Code

각 소비자는 동일한 접근 방식을 채택할 수 있으며, 언뜻 보면 확실한 솔루션처럼 보입니다.

문제

그러나 이러한 사용자 정의 방식에는 몇 가지 단점이 있습니다

❌ 향후 버그: 장기적으로 진행률 표시줄 구성요소가 업데이트되거나 리팩터링될 예정입니다. 클래스 이름이 바뀌거나 태그 계층 구조가 변경되면 사용자 정의가 중단됩니다.
? 소비자의 인지 부하: 내 구성 요소를 사용하는 개발자는 HTML 구조를 검사하여 기본값을 재정의하는 데 필요한 CSS 규칙을 결정해야 합니다.
⚒️ 번거로운 사용자 정의 코드: 막대의 색상과 테두리를 모두 수정하려면 두 가지 별도의 규칙을 작성해야 합니다.

물론 ProgressBar와 같은 간단한 경우에는 큰 문제가 아닙니다. 그러나 특히 많은 개발자가 사용하는 경우 대규모 UI 키트의 구성 요소가 더 복잡해지면 심각한 문제가 발생할 수 있습니다.

솔루션으로서의 CSS 변수

맞춤설정을 단순화하고 이러한 문제를 완화하기 위해 CSS 변수를 활용할 수 있습니다.

제 샘플 구성요소에서는 CSS 파일에서만 변경이 이루어졌습니다

.progress-bar{
  --progress-bar-color: black;
  width: 200px;
  height: 20px;
  border: 1px solid var(--progress-bar-color);
}

.progress-bar .fill{
  height: 100%;
  background: var(--progress-bar-color);
}

로그인 후 복사

색상을 설정하기 위해 --progress-bar-color 변수를 선언했습니다. 소비자는 이제 다음과 같이 쉽게 구성 요소를 맞춤 설정할 수 있습니다.

#upload .progress-bar{
  --progress-bar-color: green;
}

로그인 후 복사

이 새로운 접근 방식을 통해 사용자 정의 문제 목록을 다시 살펴보겠습니다

❌ 향후 버그: 진행률 표시줄의 개발자로서 필요에 따라 클래스 이름과 계층 구조를 수정할 수 있습니다. 하지만 업데이트된 요소에 CSS 변수를 올바르게 적용하는 한 소비자가 만든 색상 사용자 정의는 그대로 유지됩니다.
? 소비자의 인지 부하: 소비자는 더 이상 색상을 맞춤설정하기 위해 구성 요소의 코드를 검사할 필요가 없습니다. CSS 변수는 '인터페이스' 또는 '추상화' 역할을 하여 구현 세부 사항을 자세히 조사하지 않고도 원하는 색상을 간단히 설정할 수 있습니다.
⚒️ 번거로운 사용자 정의 코드: 이제 단일 CSS 규칙으로 채우기 요소와 테두리 요소를 모두 사용자 정의할 수 있습니다.