CSS 클래스는 해롭다. 오… data 애트리뷰트를 써서 상호배타적인 스타일을 정의하는 건 좋은 아이디어 같다.
@hongminhee洪 民憙 (Hong Minhee) 제 블로그에서 인용한 W3C CSS3 명세 내용에 따르면 범용성이 높은 클래스를 남용하기보다, 마크업의 구조를 따라 작성하라고 권장하고 있습니다. 꽤나 오래된 권장 사항으로 블로그 글의 레퍼런스를 조사하면서 저 명세를 CSS2 명세(2004년)로부터 알게 되었습니다.
data 어트리뷰트를 WAI-ARIA로 치환해서 같은 결과를 내놓을 수 있는데요, 이 방법의 장점은 좀 더 마크업 및 CSS Rules 작성에 대해 웹 표준을 근거로 명확한 디자인시스템을 만들 수 있다고 생각합니다.
- my-card:state(loading) {
+ my-card[aria-busy="true"] {
background: url(./spinner.svg)
}
- my-card:state(loaded) {
+ my-card[aria-busy="false"] {
border: 2px solid green;
}