CSS 개발에서 효율성과 유지보수성을 높이기 위해 커스텀 속성(변수)과 단축 속성을 함께 사용하는 경우가 많습니다. 하지만 이 두자기를 함께 사용할 때 발생할 수 있는 문제점이 있습니다. 오늘은 커스텀 속성을 단축 속성에서 사용할 때의 위험성과 그 대안에 대해 알아보겠습니다.
CSS의 오류 처리 메커니즘 이해하기
CSS의 가장 큰 장점 중 하나는 '용서(forgiving)' 특성입니다. 일반적으로 CSS에서 잘못된 값이 선언되면 해당 선언만 무시되고 나머지는 정상적으로 적용됩니다.
div {
background-color: #F00;
background-color: fcktrmp; /* 잘못된 값 */
}
/* 결과: 빨간색(#F00) 배경 */위 예제에서 두 번째 선언은 잘못된 값을 가지고 있기 때문에 무시되고, 첫 번째 선언인 빨간색 배경만 적용됩니다.
커스텀 속성의 특별한 처리 방식
그러나 커스텀 속성(CSS 변수)을 사용할 때는 상황이 달라집니다. 선언되지 않은 커스텀 속성은 '유효하지 않은 값'으로 간주되지만, 선언 자체가 무시되지는 않습니다. 대신 해당 상속값 또는 초기값이 사용됩니다.
div {
background-color: #F00;
background-color: var(--not-set); /* 선언되지 않은 커스텀 속성 */
}
/* 결과: 투명(transparent) 배경 */위 예제에서 --not-set은 선언되지 않았기 때문에 background-color는 초기값인 transparent로 설정됩니다.
단축 속성에서의 문제점
이제 커스텀 속성을 단축 속성(shorthand properties)에서 사용할 때 발생하는 문제를 살펴보겠습니다.
div {
border-style: solid;
border-width: 20px var(--border-inline) 10px;
}위 코드에서 --border-inline 커스텀 속성이 정의되지 않았다면, border-width 선언 자체가 무효화됩니다. 이는 단축 속성의 특성 때문입니다 - 하나의 값이 잘못되면 전체 선언이 무시됩니다.
개별 속성 사용의 이점
반면, 개별 속성(longhand properties)을 사용하면 문제가 발생한 속성만 영향을 받고 나머지는 정상적으로 적용됩니다.
div {
border-style: solid;
border-block-start-width: 20px;
border-inline-width: var(--border-inline); /* 이 속성만 초기값으로 설정됨 */
border-block-end-width: 10px;
}이 방식을 사용하면 --border-inline 이 정의되지 않았더라도 상단과 하단 테두리 너비는 여전히 각각 20px과 10px로 적용됩니다.
해결책
이 문제를 해결하는 방법은 두 가지가 있습니다.
1. 대체값(fallback) 제공하기:
div {
border-style: solid;
border-width: 20px var(--border-inline, 30px) 10px;
}
2. 단축 속성 대신 개별 속성 사용하기
div {
border-style: solid;
border-block-start-width: 20px;
border-inline-width: var(--border-inline);
border-block-end-width: 10px;
}
결론
CSS 커스텀 속성은 강력한 도구이지만, 단축 속성과 함께 사용할 때는 주의가 필요합니다. 선언되지 않은 커스텀 속성이 단축 속성 내에서 사용되면 전체 선언이 무효화될 수 있습니다. 이런 문제를 방지하기 위해서는 대체값을 제공하거나, 커스텀 속성을 사용할 때는 개별 속성을 선호하는 것이 좋습니다.
코드를 작성할 때 이러한 특성을 인지하고 있다면, 예상치 못한 스타일 적용 문제를 미리 방지할 수 있을 것입니다.
원문: Maybe don't use custom properties in shorthand properties