속성 선택기를 사용한 반응 형 스타일

클래스 이름을 기반으로 원자화 스타일의 한 가지 과제는 종종 특정 중단 점에 의존하여 컨텍스트를 결정한다는 것입니다.

<div></div>
<div></div>
<div></div>

접두사는 일반적으로 각 중단 점을 찾는 데 사용됩니다.

<div></div>

이것은 여러 클래스를 추가하기 전에 잘 작동합니다. 그러나 여러 클래스를 추가하기 시작하면 어떤 클래스가 어떤 중단 점과 관련된 클래스와 컨텐츠를 추가, 삭제 또는 변경 해야하는지 추적하기가 어렵습니다.

<div>
</div>

우리는 재편성을 통해 가독성을 향상 시키려고 노력할 수 있습니다.

<div>
</div>

또한 일부 특수 스플리터를 추가 할 수 있습니다 (잘못된 클래스 이름은 무시됩니다) :

<div>
</div>

그러나 여전히 혼란스럽고 이해하기가 어렵습니다.

실제 클래스 대신 속성 선택기를 그룹화하여 더 나은 개요를 얻고 접두사 구현을 피할 수 있습니다.

<div data-lg="span-4 font-size-xl font-weight-700" data-md="span-6 font-size-xl font-weight-500" data-sm="span-12 font-size-lg"></div>

이들은 클래스 모음이 아니라 공간 구분 된 속성 세트이며 [attribute~="value"] 선택기를 사용하여 선택할 수 있습니다. 여기서 ~= 정확한 단어가 일치 할 속성 값에 나타나야합니다.

 @Media (min-width : 0) {
 [data-sm ~ = "span-1"] {/*...*/}
 [data-sm ~ = "span-2"] {/*...*/}
 /* 등. */
}
@Media (min-width : 30rem) {
 [data-md ~ = "span-1"] {/*...*/}
 [data-md ~ = "span-2"] {/*...*/}
 /* 등. */
}
@Media (min-width : 60rem) {
 [data-lg ~ = "span-1"] {/*...*/}
 [data-lg ~ = "span-2"] {/*...*/}
 /* 등. */
}

이것은 조금 이상하게 보일지 모르지만 원자 클래스를 속성으로 변환하는 것이 다소 간단하다고 생각합니다 (예 : .sm-span-1 [data-sm~="span-1"] 로 변환). 또한 속성 선택기는 클래스와 같은 특이성을 가지므로 아무것도 잃지 않습니다. 또한, 클래스와 달리 특수 문자 (예 : / .:? )를 피하지 않고 속성을 작성할 수 있습니다.

그게 다야! 다시 말하지만, 이것은 스위칭 진술을 미디어 쿼리에서 쉽게 작성, 읽기 및 관리 할 수 ​​있도록하는 아이디어 일뿐입니다. 이것은 수업이나 그와 비슷한 것을 취소하는 제안이 아닙니다.

위 내용은 속성 선택기를 사용한 반응 형 스타일의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!