CSS 캐스케이드 레이어로 설계 시스템 구성 요소 패턴 구성

이 기사에서는 CSS 캐스케이드 레이어를 사용하여 사용자 정의 성, 효율성, 사용 편의성 및 구성 요소의 이해 용이성을 향상시키는 방법에 대해 설명합니다.

저는 코드 조직에 열정을 가지고 있으며 캐스케이드는 캐스케이드의 읽기 순서를 직접 따라하기 때문에 코드를 명시 적으로 정리하는 훌륭한 방법이라는 것을 알게됩니다. 더 좋은 점은 "최상위"조직을 돕는 것 외에도 캐스케이드를 중첩 할 수있어 캐스케이드를 기반으로보다 정확한 스타일을 쓸 수 있습니다.

유일한 단점은 당신의 상상력입니다-우리가 CSS를 과도하게 설계하는 것을 막을 수있는 것은 없습니다. 분명히 말해서, 내가 보여 주려고하는 것은 과다 디자인이라고 생각할 것입니다. 그러나 나는 밸런스 포인트를 발견하고 단순하고 조직적으로 유지했으며 내 발견을 공유하게되어 기쁩니다.

CSS 구성 요소 모드의 구성

CSS를 사용하여 작성 구성 요소의 패턴을 탐색하기 위해 버튼을 예제로 사용하겠습니다. 버튼은 거의 모든 구성 요소 라이브러리에서 가장 인기있는 구성 요소 중 하나입니다. 버튼이 다음을 포함한 다양한 사용 사례에서 버튼을 사용할 수 있으므로 이러한 인기의 이유가 있습니다.

서랍을 여는 것과 같은 동작을 수행합니다 UI의 다른 부분으로 이동하고 초점이나 호버와 같은 상태를 유지하십시오.

그리고 버튼은 , 및

와 같은 다양한 마킹 형태로 제공됩니다. 믿는다면 버튼을 만드는 방법이 더 있습니다.

가장 중요한 것은 다른 버튼이 다른 기능을 수행하며 일반적으로 한 작업의 버튼이 다른 작업의 버튼과 구별되도록 스타일링됩니다. 버튼은 또한 호버링, 이동 및 초점과 같은 상태 변경에 응답합니다. BEM 구문을 사용하여 CS를 작성한 적이 있다면 캐스케이드 레이어의 맥락에서 비슷한 아이디어를 생각할 수 있습니다.

좋아, 이제 코드를 써 보자. 구체적으로 여러 가지 유형의 버튼을 만들어 봅시다. 우리는 버튼으로 설정하려는 요소로 설정할 수있는 클래스로 시작합니다! 우리는 이미 버튼이 다양한 태그 형식으로 제공되므로 공통

클래스는 이러한 버튼 중 하나 또는 전부를 선택할 수있는 가장 재사용 가능하고 확장 가능한 방법입니다.
캐스케이드를 사용하는 여기, 우리는 첫 번째 캐스케이드 레이어를 삽입 할 수 있습니다! 캐스케이드 레이어를 먼저 원하는 이유는 스타일을 평가할 때 CSS 캐스케이드의 읽기 순서를 설정할 수 있기 때문입니다. 우리는 CSS에 먼저 하나의 레이어, 다른 레이어, 다른 레이어를 평가하도록 지시 할 수 있습니다. 이것은 브라우저가 "Win"에 적용되는 스타일을 제어 할 수있는 초능력을 제공하는 놀라운 기능입니다. 우리는 버튼이 구성 요소이기 때문에이 레이어의 이름을

로 지정합니다. 내가 이름을 좋아하는 이유는 설계 시스템을 확장하기로 결정할 때 향후에 추가 할 다른 구성 요소를 지원하기에 충분히 일반적이기 때문입니다. 그것은 우리가 구성 요소에만 국한되지 않을 수있는 미래에 쓴 다른 스타일과 우려의 좋은 분리를 유지하면서 우리와 함께 확장됩니다. components

중첩 된 캐스케이드 일이 조금 이상해지는 곳이 여기 있습니다. 클래스 내부에 캐스케이드 레이어를 중첩 할 수 있다는 것을 알고 있습니까? 이것은 총 일입니다. 따라서 이것을 살펴보면, 우리는 이미 자체 층 내에있는 클래스 내부에 새로운 레이어를 소개 할 수 있습니다. 이것이 내 제가 의미하는 바입니다 :

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

결국, 이것은 브라우저가 내부 레이어를 해석하는 방법입니다.

이 게시물은 중첩 스타일에 관한 것이 아니므로, 당신이 할 때 마일리지가 다를 수 있다고 말하고 싶습니다. 중첩 스타일 사용에 대한 Andy Bell의 최근 기사를주의해서 확인하십시오.

스타일 구조 지금까지, 우리는 설계 시스템의 모든 유형의 구성 요소를 수용하도록 설계된 캐스케이드 레이어 내에 클래스를 설립했습니다. 이 내부에는 태그에서 발생할 수있는 다른 유형의 버튼을 선택하는 데 사용되는 또 다른 캐스케이드 레이어가 있습니다. 우리는 버튼이 , .button 또는 에 대해 논의했으며, 이는 각 유형을 개별적으로 스타일링하는 방법입니다. 우리는

pseudo-selector 함수를 사용할 수 있습니다.

<code>.button {
  /* 所有按钮的通用样式 */
}</code>

기본 버튼 스타일을 정의하십시오 나는 모든 버튼에 맞는 보편적 인 스타일로 코드를 채울 것입니다. 이 스타일은 요소 레이어의 상단에 위치하므로 마킹에 관계없이 모든 버튼에 적용됩니다. 기본 버튼 스타일로 간주 될 수 있습니다.
버튼 상태 스타일을 정의하십시오 사용자는 기본 버튼과 상호 작용할 때 어떻게해야합니까? 이들은 사용자가 그들과 상호 작용할 때 버튼이 취할 수있는 다른 상태이며, 그에 따라 스타일링해야합니다.

<code>/* 组件顶级层 */
@layer components {
  .button {
    /* 所有按钮的通用样式 */
  }
}</code>

나는 "states"(state) : 라고 불리는 요소 하위 레이어 바로 아래에 새로운 계단식 하위 계층을 만들 것입니다.

여기서 잠시 멈추고 생각해보십시오. 우리는 어떤 주를 목표로해야합니까? 이러한 각 주에 대해 무엇을 바꾸고 싶습니까?

일부 주에서는

및 :hover와 같은 유사한 속성 변경을 동일한 배경색으로 공유 할 수 있습니다. 다행히도 CSS는 상태를 기반으로 속성 변경을 그룹화하기 위해 이러한 문제를 해결하는 도구를 제공합니다. 왜 :focus 대신 를 사용합니까? 는 특이성이 제로가 없으므로 :where()보다 다루기가 더 쉽습니다. 매개 변수에서 가장 높은 특이성 점수를 가진 요소의 특이성을 취합니다. 확장 가능하고 관리 가능한 CSS를 작성할 때 특이성을 낮추는 것은 미덕입니다. :where() :is() 그러나 의미있는 방식으로 버튼 스타일을 어떻게 업데이트합니까? 내 말은, 버튼이 호버 또는 포커스처럼 보이도록하려면 어떻게해야합니까? 우리는 그것에 새로운 배경색을 추가하면되지만 이상적으로는 색상이 요소 레이어에서 세트와 관련되어야합니다. :where() 그래서 조금 리팩터를 리팩터링합시다. 이전에는 요소의 를 로 설정했습니다. 색상을 재사용하려면 CSS 변수로 변환하여 한 번에 업데이트하고 어디서나 적용 할 수 있도록하는 것이 좋습니다. 변수에 의존하는 것은 확장 가능하고 유지 관리 가능한 CSS를 작성하는 또 다른 장점입니다. :is() 나는 라는 새 변수를 생성하여 처음에는 :is()로 설정된 다음 기본 버튼 스타일로 설정합니다.

이제 변수의 색상을 저장 했으므로 버튼이 호버링되거나 초점을 맞출 때 비교적 새로운 기능을 사용하여 를 더 밝은 색상으로 변환하여 버튼의 호버 및 초점 상태에 동일한 변수를 설정할 수 있습니다.

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

주 층으로 돌아 가기! 먼저

: 라는 새로운 CSS 변수의 색상을 혼합합니다. 그런 다음 background-color 속성을 ​​업데이트하여 해당 색상을 적용 할 수 있습니다.

수정 된 버튼 스타일을 정의하십시오 요소 및 상태 계층 외에도 수정 자와 같은 구성 요소의 일부 유형의 변경 사항을 찾고있을 수도 있습니다. 모든 버튼이 기본 버튼과 같지 않기 때문입니다. 사용자가 결정을 확인할 수있는 녹색 배경색의 버튼을 원할 수 있습니다. 또는 클릭하면 위험을 나타내는 빨간색 버튼을 원할 수도 있습니다. 따라서 기존 기본 버튼 스타일을 사용하여 이러한 특정 사용 사례에 대해 수정할 수 있습니다. .button 우리가 캐스케이드의 순서 (위에서 아래로 흐르는 길)의 순서를 고려하면 수정 된 스타일이 방금 만든 상태 레이어의 스타일에 영향을 미치기를 원하지 않습니다. 요소와 상태 사이에 새로운 수정 자 레이어를 추가하겠습니다. background-color 상태를 처리하는 방식과 유사하게, 이제 각 버튼 수정 자의 darkslateblue 변수를 업데이트 할 수 있습니다. 물론, 우리는 스타일을 더 수정할 수 있지만이 시스템의 작동 방식을 보여주기 위해 상당히 간단하게 유지합니다.

우리는 기본 버튼의 를 에서 background-color로 변경하는 새 클래스를 만듭니다. 다시 말하지만, 우리는 darkslateblue 선택기에 의존 할 수 있습니다.이 경우 특이성이 증가해야하기 때문입니다. 이렇게하면 수정 자 클래스로 기본 버튼 스타일을 대체 할 수 있습니다. 우리는이 클래스라고 부르며 (녹색은 "성공"의 색상) : 에 제공합니다. darkgreen 우리가 버튼 중 하나에 :is() 클래스를 추가하면 대신 .success가됩니다. 이것이 바로 우리가 원하는 것입니다. 우리는 상태 계층에서 일부 작업을 수행 했으므로 이러한 호버와 포커스 스타일을 자동으로 상속받을 것입니다. :is() 모든 것을 함께 통합 <code>.button {} .button-primary {} .button-secondary {} .button-warning {} /* etc. */</code> 우리는 CSS 사용자 정의 속성으로 수정 해야하는 모든 CSS 속성을 리팩터링 할 수 있으므로 많은 사용자 정의 공간을 제공합니다.

.success 참고 : 참고 : 데모를 자세히 살펴보고 를 사용하여 버튼 배경을 어떻게 조정했는지 확인하고 Sara Joy의 "Light-Dark () 측면으로 오십시오"를 읽으십시오. darkgreen 당신은 어떻게 생각하십니까? 스타일을 정리하는 데 사용 하시겠습니까? 구성 요소가 거의없는 작은 프로젝트의 경우 캐스케이드 시스템을 만드는 것이 지나치게 지나칠 수 있습니다. 그러나 우리가 지금했던 것처럼 약간의 시도조차도 CSS 캐스케이드를 관리하거나 조정하는 데 얼마나 많은 시간을 보낼 수 있는지 보여줄 수 있습니다. 버튼은 기만적으로 복잡하지만 기본 스타일에서 상태 및 수정 된 버전 작성에 이르기까지 스타일을 처리하는 데 필요한 스타일 수를 알 수 있습니다. darkslateblue

위 내용은 CSS 캐스케이드 레이어로 설계 시스템 구성 요소 패턴 구성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!