CSS 캐스케이드를 마스터하십시오 : 혼란에 작별 인사를하고 통제권을 받아들이십시오! 이 기사는 새로운 CSS 기능을 사용하여 캐스케이드를 제어하여보다 간결하고 효율적인 CSS 코드를 작성하는 방법을 살펴 봅니다. 과거에는 다른 소스의 스타일로 인해 캐스케이드가 관리하기가 어렵고 결국 중복 코드를 생성했습니다. ITCSS 및 BEM과 같은 방법으로도 @import
진술의 위치를 정확하게 제어하거나 !important
다행히도 몇 가지 새로운 도구가 나와서 캐스케이드를 효과적으로 제어 할 수 있습니다.

드라이브 :where
의사 선택기
:where
CSS로드 순서에 관계없이 사용자 에이전트 기본 스타일보다 높을 수 있도록 선택기의 특수성을 제거 할 수 있습니다. 이는 선택기의 특수성이 실제로 0이므로 일반 목적 구성 요소에 매우 유용하다는 것을 의미합니다.
예를 들어, 사용 :where
:
: 여기서 (표) {
배경색 : 황갈색;
}
로그인 후 복사
다른 테이블 스타일이 정의 된 경우에도 다음과 같습니다.
테이블 {
배경색 : Hotpink;
}
: 여기서 (표) {
배경색 : 황갈색;
}
로그인 후 복사
테이블 배경 색상은 여전히 tan
입니다 :where
선택기의 특수성을 제거합니다. 이것은 CSS 재설정에 적합한 :where
입니다.
:where
형제 선택자 :is
반대 효과가 있습니다.
:is()
의사 클래스의 특수성은 가장 특별한 매개 변수의 특수성에 의해 결정됩니다. 따라서 :is()
같이 작성된 셀렉터는 :is()
같이 작성된 셀렉터입니다. —— Selector 레벨 4 사양
이전 예제를 계속하십시오.
: is (표) {
-TBL-BGC : 오렌지;
}
테이블 {
--tbl-bgc : tan;
}
: 여기서 (표) {
--tbl-bgc : 핫 핀트;
배경색 : var (-tbl-bgc);
}
로그인 후 복사
테이블의 배경색은 tan
입니다 :is
table
과 같은 특수성이 있고 table
그 뒤에 있습니다. 그러나 우리가 그것을 바꾸면 :
: is (테이블, .c-tbl) {
-TBL-BGC : 오렌지;
}
로그인 후 복사
배경색은 orange
:is
.c-tbl
예 : 구성 가능한 테이블 구성 요소
다음 HTML로 테이블 구성 요소를 작성해 봅시다.
다음으로, 우리는 .c-tbl
:where
에 래핑하고 셀렉터를 추가하고 둥근 모서리를 추가합니다.
: 여기서 (.c-tbl) {
국경-콜라 랩스 : 별도;
국경 간격 : 0;
테이블 레이 아웃 : 자동;
너비 : 99.9%;
}
로그인 후 복사
테이블 셀은 다른 스타일을 사용합니다.
: 여기서 (.c-tbl thead th) {
/ * ... */
}
: 여기서 (.c-tbl tbody td) {
/ * ... */
}
로그인 후 복사
둥근 모서리와 border-collapse: separate
인해 추가 스타일을 추가해야합니다.
: 여기서 (.c-tbl tr td : 최초 유형) {
/ * ... */
}
/ * ... */
로그인 후 복사
이제 일반적인 스타일 전후에 다른 스타일을 주입하여 테이블 구성 요소의 변형을 만들 수 있습니다 (혜택 :where
's Specialty Emination) :
.c-tbl- 푸르플 th {
배경색 : HSL (330, 50%, 40%)
}
/ * ... */
로그인 후 복사
CSS 사용자 정의 속성
data-component
속성을 사용하여 구성 요소를 정의합니다.
일반 스타일은 모든 구성 요소 인스턴스에 적용되며 특정 구성 요소 인스턴스의 스타일은 일반 클래스에 포함되며 공통 구성 요소의 사용자 정의 속성이 사용됩니다.
: 여기서 ([data-component = "table"]) {
/ * ... */
}
.c-tbl-- 파라 {
/ * ... */
}
로그인 후 복사
공통 구성 요소에서 각 CSS 속성은 사용자 정의 속성을 가리 킵니다. 아동 요소 (예 : border-color
)에 작용 해야하는 속성은 일반 구성 요소의 루트에 지정됩니다.
: 여기서 ([data-component = "table"]) {
--tbl-hue : 200;
/ * ... */
}
: 여기서 ([data-component = "table"] td) {
국경 색 : var (-tbl-bdc);
}
로그인 후 복사
다른 속성은 사용자 정의 속성을 사용하여 정적 값을 설정하거나 구성 할 수 있습니다. 사용자 정의 속성을 사용하는 경우 변형 클래스가 누락 될 때 사용하기 위해 기본값을 정의하십시오.
: 여기서 ([data-component = "table"]) {
배경색 : var (-tbl-bgc, 투명);
/ * ... */
}
로그인 후 복사
사용자 정의 속성을 사용하여 열 정렬 및 너비를 제어 할 수 있습니다.
: 여기서 ([data-component = "table"] tr> *: nth-of-type (1)) {
텍스트-정렬 : var (-Ca1, Initial);
/ * ... */
}
로그인 후 복사
이제 일반 클래스 .c-tbl
사용하여 특정 구성 요소 스타일을 만들어 봅시다.
.c-tbl {
--tbl-hue : 330;
}
로그인 후 복사
새로운 CSS를 쓰지 않고 속성을 업데이트하면됩니다! 테이블의 색상을 업데이트하려면 속성을 변경하십시오.
얼룩말 줄무늬와 같은 더 복잡한 스타일을 쓸 수 있습니다.
.c-tbl tr : nth-Child (짝수) td {
-TBL-TD-BGC : HSL (var (-tbl-hue), var (-tbl-sat), 95%);
}
로그인 후 복사
다른 data-attribute
사용하여 매개 변수를 추가하십시오
더 많은 매개 변수를 추가하기 위해 다른 data-param
속성을 추가 할 수 있습니다.
그런 다음 CSS에서는 속성 선택기를 사용하여 매개 변수 목록의 전체 단어와 일치 할 수 있습니다. 예를 들어 얼룩말 스트라이프 행 :
[data-component = "table"] [data-param ~ = "zebrarow"] tr : nth-Child (짝수) td {
--tbl-td-bgc : var (-tbl-zebra-bgc);
}
로그인 후 복사
또는 얼룩말 줄무늬 열 :
[data-component = "table"] [data-param ~ = "zebracol"] td : nth-of-type (홀수) {
--tbl-td-bgc : var (-tbl-zebra-bgc);
}
로그인 후 복사
캐스케이드 레이어
캐스케이드를 제어하는 마지막 도구는 "캐스케이드 레이어"입니다. 현재 Safari 또는 Chrome에서 액세스 할 수있는 실험 기능으로 #enable-cascade-layers
플래그를 활성화합니다.
캐스케이드 레이어를 사용하면 특정 순서로 스타일 시트를 주입 할 수 있습니다. 단순화 된 구조는 다음과 같습니다.
@Layer 일반, 구성 요소;
로그인 후 복사
이것은 레이어의 순서를 결정합니다. 먼저 일반적인 스타일과 구성 요소 별 스타일이 있습니다.
구성 요소 스타일이 일반적인 스타일 앞에 쓰여 있어도 구성 요소 스타일 레이어는 여전히 우선합니다.
@Layer 구성 요소 {
몸 {
배경색 : Lightseagreen;
}
}
@layer generic {
몸 {
배경색 : 토마토;
}
}
로그인 후 복사
요약
:where
Pseudo-selecters :is
우리가 새로운 클래스를 작성하지 않고 스타일을 무시할 data-attribute
있게 해줍니다. CSS 캐스케이드는 더 이상 적이 아니라 우리가 제어 할 수있는 도구입니다.
Unsplash의 Stephen Leonardi의 이미지
위 내용은 캐스케이드와 싸우지 말고 통제하십시오!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!