HTML 클래스를 그룹화하면 더 읽을 수 있습니까?

HTML 요소는 여러 클래스를 가질 수 있습니다.

<div class="module p-2"></div>

이것은 완벽하게 올바르게 작동하며 두 개의 클래스가 있습니다. CSS에서는 두 수업 모두가 적용됩니다.

 .Module {}
.p-2 {}

 const div = document.querySelector ( "div");
console.log (div.classlist.contains ( "module")); // 진실
Console.log (Div.ClassList.crantains ( "P-3")); // 거짓

하지만 어떻게 그룹화 하는가? 현재 우리는 공간으로 분리 된 줄만 있습니다. 어쩌면 충분하지만 어쩌면 우리는 일을 더 명확하게 만들 수 있습니다!

몇 년 전, Harry Roberts는 수업 그룹에 대해 이야기했습니다. 그는 Square Brackets로 수업을 그룹화했습니다.

<div class="[module p-2] [utility-class-1 utility-class-2]"></div>

<p> 레이블 내부의 텍스트는 사각형 브래킷 그룹화의 의미 와이 방법의 장점과 단점을 설명합니다. 사각형 괄호 자체는 기술적으로 클래스 이름의 일부이지만 그러한 갈등의 가능성은 매우 작습니다.</p> <p> 다른 그룹화 방법에 대해서도 라인 브레이크를 사용하여 클래스 이름을 분리하는 것과 같은 기사에서 논의됩니다.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div class=&quot;module p-2 utility-class-1 utility-class-2&quot;&gt;&lt;/div&gt;</pre><div class="contentsignin">로그인 후 복사</div></div> <p> 라인 브레이크와 이모티콘을 결합합니다.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div class=&quot;module p-2 ? utility-class-1 utility-class-2 ?&quot;&gt;&lt;/div&gt;</pre><div class="contentsignin">로그인 후 복사</div></div> <p> 마지막으로 기사는 그룹화를위한 <code>data-* 속성을 사용하여 언급했습니다.

<div data-js="js-hook-1 js-hook-2" data-utilities="padding-large"></div>

이 방법은 기능적으로 실현 가능하지만 선택기와 API는 classList 만큼 편리하지 않습니다.

기사가 끝나면 독자들에게 클래스 이름을 그룹화하는 다른 영리한 방법이 있는지 물었습니다.

위 내용은 HTML 클래스를 그룹화하면 더 읽을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!