[CSS] var(), VAR(), vAr() 모두 같은 함수라고?

들어가며

CSS 함수는 일반적으로 소문자로 작성한다.

.example {
    color: var(--text-color);
    width: calc(100% - 20px);
}

그렇다면 함수 이름을 대문자로 작성한 다음 코드도 유효할까?

.example {
    color: VAR(--text-color);
    width: CALC(100% - 20px);
}

평소 익숙하게 보던 형태가 아니기에 잘못된 CSS처럼 느껴질 수 있다. 하지만 위 코드는 모두 유효하다.

var(--text-color)
VAR(--text-color)
Var(--text-color)
vAr(--text-color)

왜 유효할까? 그 이유는 CSS가 정의한 함수 이름은 ASCII 대소문자를 구분하지 않기 때문이다.
즉, var(), VAR(), Var(), vAr()은 표기만 다를 뿐 모두 같은 함수로 해석된다.

이번 시간에는 CSS 키워드와 함수 이름의 대소문자 규칙을 알아본다.
그리고 이 규칙을 린트 도구나 CSS 분석 코드에서 놓쳤을 때 어떤 문제가 발생할 수 있는지도 함께 살펴본다.

1. CSS 함수 이름은 대소문자를 구분하지 않는다

앞서 살펴본 VAR()와 CALC()가 유효한 이유는 CSS 사양에서 확인할 수 있다.

CSS Values and Units Level 4의 Functional Notations에서는 함수 이름의 대소문자 규칙을 다음과 같이 정의한다.

Like keywords, function names are ASCII case-insensitive.

즉, CSS 함수 이름은 ASCII 대소문자를 구분하지 않아, 대문자와 소문자를 조합하더라도 같은 함수 이름으로 해석된다.

var()  → VAR(), Var(), vAr()
calc() → CALC(), Calc(), cAlC()
rgb()  → RGB(), Rgb(), rGb()

실제 CSS에서도 다음과 같이 사용할 수 있다.

:root {
    --text-color: red;
}

.example {
    color: VAR(--text-color);
    width: CALC(100% - 20px);
    background-color: RGB(255 255 255);
}

VAR(), CALC(), RGB()와 같은 표기가 낯설 뿐, 모두 CSS 사양에 맞는 유효한 문법이다.

2. CSS 키워드도 대소문자를 구분하지 않는다

앞서 살펴본 사양에는 함수 이름이 키워드와 마찬가지로(Like keywords) ASCII 대소문자를 구분하지 않는다고 설명되어 있다.
그렇다면 CSS 키워드에는 어떤 규칙이 적용될까?

CSS Values and Units Level 4의 Pre-defined Keywords에는
CSS가 미리 정의한 키워드의 대소문자 규칙을 다음과 같이 설명한다.

Keywords are identifiers and are interpreted ASCII case-insensitively.

즉, CSS가 미리 정의한 키워드도 ASCII 대소문자를 구분하지 않으며, 다음 케이스도 모두 동일하게 처리된다.

.example-a {
    display: block;
}

.example-b {
    display: BLOCK;
}

.example-c {
    display: Block;
}

이 규칙은 block뿐만 아니라 CSS가 미리 정의한 다른 키워드에도 동일하게 적용된다.

.example {
    position: FIXED;
    overflow: HIDDEN;
    font-weight: BOLD;
}

일반적으로 CSS 함수와 키워드는 가독성과 코드의 일관성을 위해 소문자로 작성한다.
하지만 소문자를 권장되는 코딩 스타일과 대문자가 유효하지 않은 문법이라는 건 구분해야 한다.

3. layer()도 같은 규칙을 따른다

앞서 살펴본 대소문자 규칙은 @import에서 사용하는 layer()에도 적용된다.

CSS Cascade Level 5에서는 @import의 레이어 문법을 다음과 같이 정의한다.

@import [ <url> | <string> ]
        [ layer | layer(<layer-name>) ]?
        <import-conditions>;

사양에는 layer()가 소문자로 표기되어 있다.
하지만 layer() 역시 CSS가 정의한 함수이므로 대소문자를 구분하지 않는다.
따라서 다음 선언은 모두 동일한 함수 이름으로 해석된다.

@import "a.css" layer(theme);
@import "b.css" LAYER(theme);
@import "c.css" Layer(theme);
@import "d.css" lAyEr(theme);

괄호 없이 사용하는 layer도 CSS가 미리 정의한 키워드이므로 같은 규칙을 따른다.

@import "a.css" layer;
@import "b.css" LAYER;

4. 모든 이름이 대소문자를 구분하지 않는 것은 아니다

여기서 주의할 점이 있다.
함수 이름이 대소문자를 구분하지 않는다 해서 함수에 전달하는 값도 같은 규칙이 적용되는 건 아니다.

예를 들어 커스텀 프로퍼티의 대소문자가 다르면 서로 다른 이름으로 구분된다.

:root {
    --text-color: red;
    --TEXT-COLOR: blue;
}

따라서 다음 두 선언은 서로 다른 커스텀 프로퍼티의 값을 참조한다.

.example-a {
    color: var(--text-color);
}

.example-b {
    color: VAR(--TEXT-COLOR);
}

var와 VAR는 같은 함수로 취급되지만,
--text-color와 --TEXT-COLOR는 다른 프로퍼티로 인식된다.

표현	종류	대소문자 구분
var, VAR	CSS 함수 이름	구분하지 않음
--text-color, --TEXT-COLOR	커스텀 프로퍼티 이름	구분함

layer()도 마찬가지다.

@import "a.css" LAYER(theme);
@import "b.css" layer(THEME);

LAYER와 layer는 같은 함수로 해석되지만,
개발자가 정의한 레이어 이름인 theme과 THEME은 서로 다른 이름으로 구분된다.

결국, CSS가 미리 정의한 함수 이름과 키워드는 대소문자를 구분하지 않지만,
개발자가 정의한 이름은 대소문자를 구분한다.

5. 이 규칙을 놓치면 어떤 문제가 생길까?

평소 CSS 함수와 키워드를 대부분 소문자로 작성하기에 이 규칙을 직접 체감하기는 어렵다.
하지만 CSS 린터나 파서 기반 검사 도구를 구현할 때는 대소문자 규칙이 중요해진다.

예를 들어 layer() 함수인지 확인하기 위해 다음과 같이 이름을 비교한다고 가정해 보자.

if (functionNode.name === "layer") {
    // layer() 처리
}

이 코드는 이름이 정확히 소문자인 layer()만 인식한다.

layer(theme) /* 인식 */
LAYER(theme) /* 인식하지 못함 */
Layer(theme) /* 인식하지 못함 */

하지만 CSS 사양에서 세 표기는 모두 같은 함수로 해석된다.
따라서 검사 도구가 대문자나 혼합형 함수 이름을 인식하지 못하면 유효한 CSS를 검사 대상에서 누락하거나,
잘못된 오류를 보고할 수 있다.

이 문제를 방지하려면 CSS가 정의한 함수 이름을 비교할 때 대소문자를 무시해야 한다.

if (functionNode.name.toLowerCase() === "layer") {
    // layer() 처리
}

마치며

평소 CSS 함수와 키워드를 소문자로 작성하기 때문에 VAR(), CALC(), BLOCK 같은 표현은 잘못된 문법처럼 보일 수 있다.

하지만 CSS가 미리 정의한 함수 이름과 키워드는 ASCII 대소문자를 구분하지 않는다.

var()   → VAR(), Var(), vAr()와 동일
calc()  → CALC(), Calc(), cAlC()와 동일
layer() → LAYER(), Layer(), lAyEr()와 동일

다만 이 규칙이 모든 이름에 적용되는 것은 아니다.
함수 이름과 달리 커스텀 프로퍼티나 레이어 이름처럼 개발자가 정의한 이름은 대소문자에 따라 구분될 수 있다.

var()과 VAR()                  → 같은 함수 이름
--color와 --COLOR             → 서로 다른 커스텀 프로퍼티 이름
layer()와 LAYER()              → 같은 함수 이름
theme과 THEME                  → 서로 다른 레이어 이름

코드를 직접 작성할 때는 사소한 차이처럼 보이지만,
CSS를 분석하거나 검사하는 도구에서는 이 규칙을 놓치면 유효한 문법을 제대로 인식하지 못할 수 있다.

사양에 소문자로 표기되어 있다고 해서 소문자만 유효한 것은 아니다.
개별 문법뿐만 아니라 CSS 전반에 적용되는 공통 규칙도 함께 확인해야 한다.