(번역) :where() :is() :has()? 당신의 삶을 더 쉽게 만들어 줄 새로운 CSS 선택자

원문: https://polypane.app/blog/where-is-has-new-css-selectors-that-make-your-life-easier/
멋진 도구를 만들고 좋은 글을 작성해주신 Polypane팀에게 감사를 전합니다

사람들이 CSS 복잡성에 관해 이야기할 때, 주로 이야기하는 주제는 CSS 명시도(specificity) 또는 효과적인 CSS 선택자 작성에 관한 부분입니다. CSS 선택자를 더 많이 추가할수록 더 정확하지만, 더 구체적일수록 나중에 필요한 스타일을 덮어쓰기 더 어려워집니다.

이 양날의 검은 좋은 CSS 선택자를 작성하는 것을 어렵게 만듭니다. 구체적이되 너무 구체적이지 않아야 합니다. 이것이 바로 OOCSS에서 BEM, Atomic CSS에 이르기까지 좋은 CSS 선택자를 작성하거나 문제를 완전히 피하기 위한 많은 전략이 있는 이유입니다.

이 글은 Kilian이 Web Directions Hover 2022에서 한 연설을 발췌했습니다. Kilian이 이 글을 읽는 당신의 컨퍼런스, 모임 또는 조직에서 발표하는 데 관심이 있다면 당사에 연락하세요.

CSS는 언어 및 구문 수준에서 빠르게 발전하고 있습니다. 예를 들어 Container query나 Cascade layer는 CSS로 작성하는 선택자에 영향을 줍니다. Cascade layer는 널리 사용이 가능하며 Container Query 또한 Polypane에서 바로 테스트할 수 있습니다.

이 글에서는 구문에 초점을 맞추지 않고 CSS 선택자에 사용할 수 있는 몇 가지 새로운 기능인 :is(), :where() 그리고 :has() 의사 클래스(pseudo-classes)를 살펴보겠습니다. 네. 글 제목에서는 조금 재미있게 들릴 것 같아서 조금 바꿔봤습니다.

약간의 역사

:is() 의사 클래스가 있기 전에는 :matches()의사 클래스가 있었습니다. 그리고 그 전에 *-any 의사 클래스인 :-moz-any()와 :-webkit-any()가 있었습니다.

*-any 의사 클래스가 2010년부터 존재해 왔다는 사실을알면 놀랄 수도 있습니다. Firefox 4에서 :-moz-any()로 도입되었으며, :is()와 거의 동일하게 작동했습니다.