CSS 커스텀 속성은 CSS 파일 가장 위에 :root{}와--를 이용해서 폰트 색상이나 사이즈 등 전역으로 사용할 CSS 속성을 먼저 정의해주는 것이다. 기업의 색상, 폰트 등 가이드라인이 있는 경우 이렇게 먼저 설정해 주면 협업과 유지보수에 용이하다.

다음 두 예시를 살펴보자.

1. CSS 커스텀 속성을 사용하지 않은 코드

.form-control.success input {
  border-color: #2ecc71;
}
.form-control.error input {
  border-color: #e74c3c;
}
.form-control small {
  position: absolute;
  color: #e74c3c;
  bottom: 0;
  left: 0;
  visibility: hidden;
}

위의 코드는 길이가 짧음에도 불구하고 border-color나 color에서 동일한 컬러 속성이 겹치는 것을 알 수 있다. 그렇지만 만약 만 줄의 코드라면? 클라이언트 측에서 전체 컬러를 바꿔달라는 요청이 들어온다면? 스타벅스의 초록색이나 맥도날드의 빨간색과 노란색처럼 기업의 브랜드 컬러는 웹에서 다양한 곳에서 쓰이는데, 쓰이는 곳에서마다 새로 컬러값을 써 줘야 한다면 작성도 리팩토링도 어려워질 것이다.

2. CSS 커스텀 속성을 사용한 코드

2-1. 커스텀 속성 정의하기

:root{}에서 커스텀 속성을 정해준다. 커스텀 속성은 어떤 CSS 속성이든 다 정의할 수 있다.
-- 표시를 이용하여 변수를 설정해준다. --success-color, --error-color 등 컬러 뿐만이 아니라, --font-weight-regular, --font-weight-bold 등 다양한 변수를 임의로 설정할 수 있다.

:root {
  --success-color: #2ecc71;
  --error-color: #e74c3c;
}

2-2. 커스텀 속성 사용하기

var을 이용해서 커스텀 속성을 사용한다. 다른 엘리먼트 속성을 설정해 주듯이 color(속성): var(값) 형태로 그대로 써 주면 된다.

.form-control.success input {
  border-color: var(--success-color);
}
.form-control.error input {
  border-color: var(--error-color);
}
.form-control small {
  position: absolute;
  color: var(--error-color);
  bottom: 0;
  left: 0;
  visibility: hidden;
}