(BUSAN.SASHIMI)
주간 다이제스트 // STYLING — 2026년 34주차
palette주간 보고서

CSS에 native class prefix selector가 온다 — 34주 스타일링

제안된 class-prefix selector, 3상태 color mode, 9칸 tile 문법이 CSS 구조를 더 빠르고 읽기 쉬운 interface rule로 바꿉니다.

calendar_todaysummarize2026년 34주차
CSS의 미래: Class Prefix Selector로 여러 class 선택하기
태그: CSS SPEC읽기_시간: 6분

CSS의 미래: Class Prefix Selector로 여러 class 선택하기

제안된 Class Prefix Selector는 base class를 추가하거나 substring attribute selector를 쓰지 않고 .btn-*로 .btn-primary, .btn-danger 같은 family를 선택하게 합니다. css-selector-benchmark 비교에서 일반 class selector는 초당 6,000회가 넘었지만 attribute 우회는 최저 328회로 떨어져 약 20배 차이를 보였습니다. CSS Working Group은 최초 제안 2년 뒤인 8월 이 기능을 Selectors Level 5에 추가하기로 결정했습니다. 빈 prefix match, 잘못된 class 문자, 공유 wildcard syntax는 여전히 논의 중입니다. 유망한 specification 작업이지만 team이 오늘 배포할 browser feature는 아닙니다.

기사 읽기arrow_forward
태그: COLOR MODE읽기_시간: 9분

3상태 Dark Mode Toggle이 필요한 이유

Binary light-or-dark control은 많은 사용자가 가진 세 번째 선호, 즉 운영 체제를 계속 따르겠다는 선택을 조용히 버립니다. 3상태 control은 light, dark, system을 명시적 값으로 보존하므로 사용자가 override하기 전까지 OS theme 변경이 반영됩니다. 24시간 공개 poll에서는 43명이 3상태를, 6명이 binary switch를 선택했습니다. Article은 이 signal을 의미론적 논거를 대체하지 않고 검증하는 데 씁니다. 구현은 system을 분명히 label하고 정확한 값을 저장하며 현재 computed theme에서 추측하지 않아야 합니다. State 하나를 더하면 사용자 intent를 되돌리고 확인할 수 있습니다.

태그: CSS 구성읽기_시간: 8분

CSS Grid로 만든 Modernist Tile

Carmen Ansio는 Barcelona의 hydraulic-tile geometry를 하나의 static illustration로 따라 그리지 않고 재사용 가능한 CSS system으로 옮깁니다. 각 tile은 9×9 grid이며 cell은 radial·linear gradient, border radius, transform, 공유 custom property를 조합합니다. Fan, lens, star, corner 같은 named shape가 visual grammar를 remix할 만큼 읽기 쉽게 만듭니다. 색상과 geometry를 분리해 asset을 다시 그리지 않고 여러 palette와 arrangement를 만들 수 있습니다. 작은 vocabulary를 찾고 component로 encode한 뒤 layout이 variation을 조립하게 하는 장식 UI pattern입니다.

summarize다이제스트_요약

CSS Working Group은 .btn-* 같은 syntax를 쓰는 Class Prefix Selector를 Selectors Level 5에 추가하기로 결정했습니다. 모든 class를 반복하거나 substring attribute selector를 쓰지 않고 naming family를 대상으로 합니다. 한 benchmark에서 일반 class selector는 초당 6,000회 넘게 실행됐지만 attribute 우회 방식은 328회로 떨어져 거의 20배 느렸고 frame budget 약 3ms를 썼습니다.

Theme control에도 똑같이 명시적인 model이 필요합니다. light-or-dark switch는 운영 체제를 계속 따르고 싶은 사용자를 표현할 수 없으므로 지속 가능한 control에는 light, dark, system 상태가 필요합니다. 소규모 공개 poll은 43대 6으로 3상태 model을 선호했지만 더 강한 근거는 의미론입니다. 값을 명시적으로 저장하고 system을 분명하게 표시해 사용자가 바꾸기 전까지 OS 변경이 계속 반영되게 해야 합니다.

Carmen Ansio의 modernist tile은 같은 아이디어의 조합적 측면을 보여줍니다. 각 tile은 9×9 CSS Grid이고 cell은 gradient, border, transform과 작은 shape vocabulary로 반복 가능한 motif를 만듭니다. geometry에 이름을 붙이면 시각 reference가 편집 가능한 rule로 바뀌어 일회성 coordinate 더미 없이 design을 확장하고 변형할 수 있습니다.

핵심 요점
  • .prefix-*가 브라우저에 도착할 때까지 현재의 base class나 명시적 selector 목록을 유지하세요. 이 기능은 draft specification에 포함하기로 결정됐지만 production baseline은 아닙니다.
  • theme 선호도를 light, dark, system으로 표현하고 정확한 선택을 저장하며, binary toggle에서 추론하지 말고 system option을 눈에 보이게 하세요.
  • 장식 system을 작은 named geometry와 공유 custom property로 구성해 임의의 값을 복제하지 않고 의도적이고 responsive한 variation을 유지하세요.