캐스케이드와 싸우지 말고 통제하십시오!

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!