CSS 전 처리기를 사용한 선택기 특이성-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 전 처리기를 사용한 선택기 특이성

William Shakespeare

Feb 25, 2025 am 11:30 AM

Selector Specificity with CSS Preprocessors 키 포인트

선택기 특이성은 신중한 관리와 이해가 필요한 중간 및 대규모 프로젝트에서 되풀이되는 문제입니다. 대화식 계산기 및 Sass 'Mixin과 같은 도구는 특이성을 이해하고 관리하는 데 도움이 될 수 있습니다. BEM (블록, 요소, 수정 자) 방법은 일관된 특이성을 유지하기위한 강력한 도구입니다. 각 스타일의 요소에 클래스 이름을 사용함으로써 각 선택기의 특이성은 동일하게 유지되며 지나치게 특정 선택기의 문제를 제거합니다. 그러나 BEM은 모든 유형의 프로젝트, 특히 비 개발자가 부분 HTML을 작성해야 할 수있는 프로젝트에 적합하지 않을 수 있습니다.

CSS 사전 처리기는 Less, Sass 및 Stylus와 같은 전처리 기가 특정 문제에 대한 솔루션을 제공합니다. 한 가지 방법은 클래스, 속성, ID 또는 유형 선택기와 함께 기존 선택기를 추가하여 특이성을 향상시키는 것입니다. 이 방법에는 가장 무거운 선택기가 사용되면 새롭고 무거운 선택기가 생성되지 않으면 덮어 쓰지 않기 때문에 한계가 있습니다. <ul> <self-> 또 다른 접근 방식은 ID, 클래스 및 속성 선택기와 함께 작동하는 자체 체인 선택기입니다. 이 메소드는 선택기를 무의미하게 확장 할 수있는 거의 확장 가능한 방법을 제공하지만 유형 선택기와 함께 작동하지 않습니다. 상위 참조 선택기를 사용함으로써 동일한 선택기는 매번 특이성을 증가시킬 때마다 여러 번 연결 될 수 있습니다. <li> </li> <ity> 선택기 특이성은 대부분의 중간 및 대형 프로젝트의 실제 문제이며, 다른 자주 반복되는 코딩 문제와 마찬가지로 신중하게 처리해야합니다. CSS- 트릭조차도 CSS 특이성을 낮게 유지하는 방법에 대한 최근 기사가 있습니다. 당신이 <to>를 사용하기 전에, 내가 당신에게 다음과 같이 상기시켜 드리겠습니다. & gt; —— Tony Nelson (@tonynelson19) 2010 년 11 월 18 일 <specific> CSS 특이성은 복잡하지는 않지만, 커뮤니티는 물고기와 스타 워즈와 유사한 유사성을 사용하여 가이드를 작성하거나 포커 용어를 사용하여 가이드를 작성하기 위해 가능한 많은 노력을 기울였습니다. 온라인으로 이용할 수있는 대화식 계산기와 Sass의 특정 믹스 인이있어 선택기의 정확한 특이성 값을 확인하고 출력 할 수 있습니다. CSS 별 전략에서 더 단순할수록이 기사의 특정 솔루션 (약간 서투른 느낌이들 수 있음)은 아키텍처가 간단한 수정을 허용하지 않는 상황에 적합합니다. 프로젝트에 가장 적합한 접근 방식을 결정할 때는 판단을 적용하고 궁극적으로 깨끗하고 관리하기 쉬운 CSS 간의 완벽한 균형을 맞추려고 노력하십시오. <li> 메소드 0 - BEM </li> <not> BEM은 단순한 이름 지정 컨벤션이 아니라 Yandex가 발명 한 프론트 엔드 툴킷이며 객체 지향 프로그래밍에 더 가깝다는 아이디어입니다. 실제로 이것은 스타일의 스타일에 클래스 이름을 사용하는 것을 의미합니다. "계단식 스타일 시트에 케이싱을하지 않는 것"은 일부 사람들에게는 어리석게 들릴 수 있지만, 유지하기 쉬운 모듈, 휴대용, 자급 자족하고 수정하기 쉽고 확장 가능한 모듈을 만들 때 유형 선택기를 사용하지 않을 수 있으며 둥지를 피하는 아이디어는 매우 중요합니다. 도움이 되는. 그러나 BEM 방법의 주요 장점 중 하나는 각 선택기의 특이성을 변경하지 않으므로 지나치게 구체적인 선택기로 인한 문제가 거의 없으므로이 방법이 No. 0 메소드 인 이유입니다. , 당신은 실제로 프로젝트에서 선택기 특이성에 대한 미래의 문제를 제거합니다. <p> <rules> 규칙의 사양 </rules></p> <only> 쓰기 모든 것에 대해서만 단일 클래스 만 사용하므로 각 선택기의 특이성은 0,1,0 입니다. <not> bem은 대답이 아닙니다 <less> BEM의 프론트 엔드 아키텍처 사용에 대한 수많은 성공 사례가 있지만, 인기에도 불구하고 BEM은 특정 유형의 프로젝트에 적합하지 않습니다. 프론트 엔드 개발자가 HTML을 작성하는 유일한 프로젝트가되는 것은 완벽한 것 같습니다. 그러나 컨텐츠 편집기의 적어도 일부에 대한 CMS에 대한 콘텐츠를 작성하면 BEM이 심각하게 제한됩니다. BEM의 순수한 형태는 <p> (예 : 더 가볍게 만들기 위해)와 같은 중첩 및 유형 선택기를 허용하지 않지만 대신 앵커 태그에 대한 클래스를 발명해야합니다. 이로 인해 문제가 발생합니다. 컨텐츠 편집기는 그래픽 인터페이스를 통해 기본 링크를 삽입하여 링크가 거의 보이지 않게됩니다. 이것은 특정 섹션의 모든 단락, 목록 또는 이미지에도 적용될 수 있습니다. 때로는 클래스없이 순수한 HTML 컨텐츠를 작성할 수 있어야합니다.이 경우 솔루션은 부모가 자손 선택기로 스타일링하는 것입니다. 이러한 계단식 사용은 컨텍스트 유연성을 허용합니다. 다른 컨텍스트에있을 때 맞춤형 스타일이 있습니다. 따라서 우리는 순수한 BEM을 사용할 수없는 상황에 대한 실용적인 솔루션이 필요합니다. CSS 전 처리기는 여기서 우리를 도울 수 있으며, 3 명의 인기있는 전처리 기자 (Less, Sass 및 Stylus)는보다 구체적인 선택기로 선택기를 무시해야 할 때 작업을 단순화 할 수 있습니다. </p> 메소드 1 - 선택기를 사용하여 접두사를 추가하십시오 <oun> 특이성 문제가 발생하고 선택기를 더 무겁게 만들려면 기존 선택기 전에 클래스, 속성, ID 또는 유형 선택기를 추가 할 수 있습니다. 이런 식으로, 당신은 특이성을 약간 증가시킬 수 있습니다. 이 기능은 주로 조건부 HTML 태그를 사용하여 IE를 찾는 데 사용되지만 더 많은 기능을 개발할 수 있습니다. CSS의 Parent Reference Selector (&) CSS Preprocessor는 선택기 접두사를 쉽게 추가하여 더 무겁게 할 수 있으므로 다음을 수행 할 수 있습니다. <h3> <s> CSS를 생성했습니다 : <pre class="brush:php;toolbar:false"><code>.class { body & { foo: bar; } }</code> html 또는 body tag를 접두사에 사용하고 싶을 수도 있지만 페이지에 ,

, .page 등과 같이 페이지에 존재하는보다 구체적인 콘텐츠를 사용할 수도 있습니다. SASS를 사용하면 미래에 변경이 발생할 때 접두사 선택기를 배치 할 수 있습니다. 대규모 프로젝트의 경우 가중치가 다른 일련의 접두사 선택기를 만들 가치가 있습니다. #wrapper 이것은 다음과 같이 생성됩니다 : html[lang] Less 및 Stylus와 같은 인기있는 전처리기도 도이 기능을 제공합니다.

규칙의 사양

<code>body .class {
  foo: bar;
}</code>

접두사 추가 유형 선택기가있는 원래 클래스 선택기 0,1,0으로 인해 0,1,1, 접두사는 ID - 1,1,0이됩니다. 여기서 단점은 코드에서 가장 무거운 선택기 (예 :

)와 함께 선택기 접두사를 추가하면 새롭고 무거운 선택기를 발명하지 않으면 더 이상 무시할 수 없으며 항상 가능하지는 않다는 것입니다.

방법 2-자체 체인 선택기

<code>$prepend1: "html &";
$prepend2: "#wrapper &";

.selector {
  #{$prepend1} {
    background: #cacaca;
  }
  #{$prepend2} {
    background: #fefefe;
  }
}</code>

선택기 접두사 추가는 유용하지만 무한한 확장 가능한 솔루션은 아닙니다. 부모를 찾는 방법이 제한되어있을 수 있습니다. 또한 코드에서 가장 무거운 옵션으로 다중 선택기를 접두하면 나중에 특이성 문제를 해결하기위한 옵션 (특히 ID를 사용하는 경우)을 제한합니다. 프론트 엔드 커뮤니티는 최근에 매우 유용한 CSS 기능, 즉 특이성을 향상시키기위한 셀프 체인 선택기를 상기시켜주었습니다. 자가 체인 선택기는 ID, 클래스 및 속성 선택기에 적합하지만 유형 선택기에는 적합하지 않습니다. 그러나 주로 클래스를 사용하여 컨텐츠 스타일을 사용하는 경우 자체 체인 선택기는 선택기를 무한한 확장 가능한 방법을 제공합니다. 상위 참조 선택기를 사용하면 동일한 선택기를 여러 번 쉽게 연결할 수 있습니다 (ID, 클래스 및 속성 선택기에 적용되지만 선택기를 입력하지는 않습니다). 그러나 첫 번째 및 첫 번째 요건은 SASS 3.4 : 입니다.