최근 Bramus가 공유한 내용을 보고 작성했습니다:

/* 기본 클래스 추가하기 */
.btn {
padding: 0.5rem 1rem;
...

우선, 만약 Bramus의 활동을 팔로우하지 않았다면 어디에 계셨나요?! 농담 삼아 말하자면, 그의 역할은 이런 새로운 기능들—특히 Chrome과 관련된 것들—에서 항상 선두에 서는 것입니다. 그러니 그의 RSS나 소셜 미디어를 주시할 가치가 있습니다.

이것은 새로운 제안이 아닙니다. Lea가 2024년에 이미 게시했고, 그동안 계속해서 이를 주장해 왔습니다. Bramus가 자신의 포스팅에서 언급했듯이, 새로워진 점은 이 제안이 공식적으로 채택되었고, 사흘 전을 기점으로 Selectors Level 5 스펙 초안에 추가되었다는 것입니다. 따라서 어느 시점에는 공식적으로 채택되어 어쩌면 더 빨리 구현되는 것을 볼 수 있을 가능성이 높습니다.

저는 이것의 사용 편의성(ergonomics)이 정말 마음에 듭니다. 기존의 부분 문자열 선택자(substring selectors)인 `class^=

…어쩌면 길고 긴 기다림일 수도 있습니다. 하지만 우리는 모릅니다. 그리고 만약 사용 편의성이 판매 포인트라면, 우리는 그 기다림 속에서 그것을 잃고 있는 것입니다.

또한 와일드카드(wildcard)가 다른 조건이나 대시(-)가 없는 경우와는 일치하지 않는다는 점에 유의해야 합니다:

/* 안 돼 */
.prefix* {}
.prefix-*-suffix {}
...

또 한 가지 주목할 만한 점은, 사양(spec)이 현재 이것이 클래스 선택자와 동일한 특이성(specificity), 즉 (0,1,0)을 갖는 것처럼 암시하고 있지만(명확히 진술하지는 않음) 그렇다는 것입니다. 이는 .prefix-*가 .prefix-variation을 작성하는 것과 정말 다르지 않기 때문에 말이 됩니다.

그렇긴 하지만, 중첩된 구문에서 어떻게 보일 수 있을지에 대해서는 마음에 듭니다:

.prefix {
/* 이렇게 작동할까요? */
&-* { /* ... */ }
...

…그리고 웹 컴포넌트(web components) 선택을 지원해 달라는 Dave의 간청입니다:

어쩌면 제가 그저 마음에 든다고 스스로를 설득했을지도 모릅니다. 또 다시, 모르겠습니다. 그냥 추가된 편리함을 받아들이고 넘어가세요! 에이, 뭐 그런 거지 뭐.