내 BEM에 의사 클래스를 추가하겠습니다 ... <code>/* ❌ 特异性分数：0,2,0 */
.something:not(.something--special) {
/* 所有 something 的样式，除了特殊的 something */
}</code>
아뇨! 그 특정 점수를 보셨습니까? BEM을 사용하면 선택기의 특정 점수가 0,1,0 인 이상적입니다. 0,2,0이 좋지 않은 이유는 무엇입니까? 유사한 확장 예제를 고려하십시오 :
두 번째 선택기가 소스 코드 시퀀스에 마침내 나타나더라도 첫 번째 선택기의 더 높은 특이성 (0,1,1)이 이기고
요소의 색상이 빨간색으로 설정됩니다. 즉, BEM이 올바르게 작성되었으며 선택한 요소가 <code>.something:not(a) {
color: red;
}
.something--special {
color: blue;
}</code> 기본 클래스와 modifier 클래스를 HTML에서 모두 적용한다고 가정합니다. .something--special
부적절하게 사용되면,이 의사 클래스는 예상치 못한 방식으로 캐스케이드에 영향을 줄 수 있습니다. 특히 더 크고 더 복잡한 코드베이스에서 나중에 문제를 일으킬 수있는 것은 이러한 불일치입니다. .something
.something--special 오. 그래서 지금 무엇을해야합니까?
방금 말한 것을 기억하고 와 그 특이성은 0입니까? 우리는 이것을 활용할 수 있습니다 :
이 선택기의 첫 번째 부분은 일반적인 특이성 점수 0,1,0을 얻습니다. 그러나 와 그 안에있는 모든 것의 특이성은 0이며 선택기 특이성을 더 이상 증가시키지 않습니다.
: 여기서 ()는 우리가 를 둥지로써 허용합니다
내가하는 것만 큼 특이성에 관심이없는 사람들은 (그리고 아마도 많은 사람들이) 둥지를 잘 해왔습니다. 임의의 키보드 타이핑을 사용하면 이와 같은 CSS를 얻을 수 있습니다 (단순성을 위해 SASS를 사용한다는 점) : :where().
이 예에서는 구성 요소가 있습니다. "추천"카드 (/* ✅ 特异性分数：0,1,0 */
.something:where(:not(.something--special)) {
/* 等 */
}
완고한 특정 광신자가 이것을 할 수 있습니다 :
나쁘지 않아요? 솔직히 이것은 CSS입니다. .something
그러나 HTML에도 단점이 있습니다. 숙련 된 BEM 저자는 조건부로 수정 자 클래스를 여러 요소에 적용하기 위해 복잡한 템플릿 로직이 필요하다는 것을 고통스럽게 알고있을 수 있습니다. 이 예에서 html 템플릿은 수정 자 클래스를 3 가지 요소 (, :where() 및 )에 조건부로 추가해야하지만 실제 예제에서는 더 많을 수 있습니다. 많은 if 진술이 있습니다.
선택기는 특이성 수준이 높아지지 않고 적은 템플릿 로직과 BEM 클래스가 적은 템플릿 로직을 쓰는 데 도움이 될 수 있습니다.
다음은 Sass의 동일한 내용입니다 (후행 대) :
다양한 아동 요소에 수정 자 클래스를 적용하는 대신이 방법을 선택 해야하는지 여부는 개인 선호도에 따라 다릅니다. 그러나 적어도 <code>.card { ... }
.card--featured {
/* 等 */
.card__title { ... }
.card__title { ... }
}
.card__title { ... }
.card__img { ... }</code> 이제 우리는 선택의 여지가 있습니다! BEM HTML이 없으면 어떻게해야합니까?
우리는 불완전한 세상에 살고 있습니다. 때로는 통제 할 수없는 HTML을 처리해야합니다. 예를 들어, HTML을 스타일링하는 데 필요한 타사 스크립트를 주입하십시오. 이 태그는 일반적으로 BEM 클래스 이름을 사용하여 작성되지 않으며 경우에 따라 이러한 스타일은 클래스를 전혀 사용하지 않고 ID입니다!
마찬가지로, 도이 문제를 해결하는 데 도움이 될 수 있습니다. 이 솔루션은 우리가 알고있는 DOM 트리의 클래스를 참조해야하기 때문에 약간 서투른 것입니다.
인용 부모 요소는 약간 위험하고 제한적이라고 느낍니다. 학부모 수업이 어떤 이유로 변경되거나 존재하지 않으면 어떻게됩니까? 더 나은 (그러나 아마도 똑같이 서투른) 솔루션은 대신 :where()를 사용하는 것입니다.
의 특이성은 선택기 목록에서 가장 구체적인 선택기와 같습니다. <code>/* ❌ 特异性分数：0,2,0 */
.something:not(.something--special) {
/* 所有 something 的样式，除了特殊的 something */
}</code>
