Bricks 기본 스타일의 특이성은 항상 균형을 맞추는 문제였습니다. 저희는 이러한 스타일을 최대한 눈에 띄지 않게 유지하고 사용자가 그 위에 디자인을 추가할 수 있는 빈 캔버스를 제공하는 것을 목표로 하지만, 선택자 특이성만으로 이를 달성하는 데에는 한계가 있습니다. 어떤 경우에는 사용자가 원하는 경우에도 특정 선택자를 재정의하는 데 어려움을 겪기도 했습니다.
Bricks 1.12는 CSS 캐스케이드 레이어를 통해 이 오랜 문제에 대한 유망한 해결책을 제시하며 , 2024년 12월 기준으로 96%의 브라우저 지원과 "널리 사용 가능한" 기준선을 달성했습니다.
브릭스 2.0 버전부터 이 기능은 기본적으로 활성화 되어 있습니다. 브릭스 설정 > 성능 > 레이어 캐스케이드 에서 비활성화할 수 있지만 , 권장하지 않습니다.
이 기능은 캐스케이드 레이어를 활용하여 Bricks의 기본 스타일이 페이지의 다른 스타일과 상호 작용하는 방식을 정의합니다.
작동 방식
이 기능은 벽돌 쌓기 방식을 도입합니다.
bricks.reset(우선순위가 낮은 레이어): 이 하위 레이어는 비어 있으며, 고급 사용자를 위한 안전 장치 역할을 합니다. Bricks 자체는 이 레이어에 어떤 스타일도 적용하지 않습니다.bricks이 레이어에는 Bricks의 기본 스타일과 요소 CSS가 포함되어 있어, 레이어가 없는 스타일이나 우선순위가 높은 사용자 정의 레이어의 스타일을 사용하여 더 쉽게 재정의할 수 있습니다.- 추가 브릭 레이어 : 일부 프런트엔드 에셋은
bricks.gutenberg,bricks.icons, 또는bricks.libs와 같은 보다 구체적인 레이어를 사용하여 관련 재설정, 편집기, 아이콘 또는 라이브러리 스타일이 의도한 순서를 유지할 수 있도록 합니다.
문제점과 해결책을 설명하기 위한 예시를 들어보겠습니다.
문제점: 선택자 특이성
기본 Bricks 스타일에서 일반적인 패턴은 다음과 같습니다.