BEM 및 최신 CSS 선택기로 캐스케이드를 길들이십시오

bem. 프론트 엔드 개발의 거의 모든 기술과 마찬가지로 CSS를 BEM 형식으로 작성하면 분극이 발생할 수 있습니다. 그러나 트위터 소셜 서클에서는 더 인기있는 CSS 방법 중 하나 이상입니다.

나는 개인적으로 BEM이 좋다고 생각하고 당신이 그것을 사용해야한다고 생각합니다. 그러나 나는 또한 당신이 그것을 사용하지 않을지 이해할 수 있습니다.

BEM에 대한 귀하의 의견이 무엇이든, 그것은 몇 가지 이점을 제공합니다. 가장 큰 이점은 CSS 캐스케이드의 특정 충돌을 피하는 데 도움이된다는 것입니다. 적절하게 사용하면 BEM 형식으로 작성된 선택기는 동일한 특이성 점수 (0,1,0)를 가져야하기 때문입니다. 수년에 걸쳐, 나는 많은 대형 웹 사이트 (정부, 대학 및 은행을 생각)를위한 CSS를 디자인했으며 BEM이 실제로 빛나는 곳을 발견하게 한 큰 프로젝트입니다. CSS를 작성하는 것은 글을 쓰거나 편집하는 스타일이 웹 사이트의 다른 부분에 영향을 미치지 않는다고 확신 할 때 더 재미 있습니다.

실제로, 어떤 경우에는 특이성을 추가하는 것이 완전히 수용 가능한 것으로 간주됩니다. 예를 들면 다음과 같습니다. 그들의 특이성 점수는 0,2,0입니다. 다른 하나는 의사 요소 (예 :

및

)입니다. 특이성 점수는 0,1,1입니다. 그러나이 기사의 나머지 부분에서는 다른 특정 스프레드를 기대하지 않는다고 가정 해 봅시다. ? 그러나 나는 정말로 당신에게 BEM을 팔고 싶지 않습니다. 대신, 나는 더 강력한 캐스케이드 제어를 위해 현대식 CSS 선택기 (예 : ,

, 등)와 함께 사용하는 방법에 대해 이야기하고 싶습니다.

현대 CSS 선택기는 무엇입니까? ：hover CSS 선택기 레벨 4 사양은 요소를 선택하는 강력하고 비교적 새로운 방법을 제공합니다. 제가 가장 좋아하는 것 중 일부에는 , ：focus 및 ::before가 포함되어 있으며, 모든 현대식 브라우저에서 모두 지원되며 이제 거의 모든 프로젝트에서 사용하기에 안전합니다. ::after

및

는 기본적으로 특이성에 다른 영향을 미친다는 점을 제외하고는 기본적으로 동일합니다. 구체적으로, :is()의 특이성 점수는 항상 0,0,0입니다. 예, :has()조차도 구체적이지 않습니다. 동시에 :where()의 특이성은 매개 변수 목록에서 가장 구체적인 요소의 특이성입니다. 따라서 우리는 이미 사용할 수있는 두 개의 현대 선택기 사이의 캐스케이드 마감에 차이가 있습니다.

강력한

관계형 의사 클래스는 브라우저 지원을 빠르게 얻는 것입니다 (제 생각에는 그리드 이후 CSS의 가장 큰 새로운 기능). 그러나 글을 쓰는 시점에서

에 대한 브라우저 지원은 생산 환경에서 사용하기에 충분하지 않습니다. :is() 내 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>

따라서 위의 예에서와 같이

를 사용하지 않고 우리가 알고있는 클래스 (또는 희망!)를 언급하기 위해 :is()를 사용할 수 있습니다. :is()

항상 기존

는 우리가 :is() 요소를 선택하는 데 도움이되며, 에서 :where() 클래스의 존재는 셀렉터가 클래스와 동일한 특이성 점수 (0,1,0)를 사용하여

를 사용하여 선택기가 이것보다 더 구체적이지 않도록합니다.

<code>.something:not(a) {
  color: red;
}
.something--special {
  color: blue;
}</code>

그게 다야!

이것은 우리가 BEM 형식으로 CSS를 작성할 때 얻을 수있는 body 및 pseudo 클래스의 현대적인 특정 관리 기능을 활용하는 방법입니다. 가까운 시일 내에 Firefox (현재 글을 쓰는 시점에서 현재 로고 뒤에 지원됨)에 의해 지원되면 #widget가 :is()와 페어링하여 특이성을 취소 할 수 있습니다. .dummy-class 당신이 BEM을 완전히 명명하고 있는지 여부에 관계없이 선택기 특이성이 좋은 것이라는 데 동의 할 수 있기를 바랍니다! body

위 내용은 BEM 및 최신 CSS 선택기로 캐스케이드를 길들이십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!