소개 / 배경 : CSS 컴포넌트
비교적 큰 웹 사이트의 경우 SASS와 협력하고 있으며 구성 요소에서 CSS를 관리하려고합니다. 컴포넌트의 기본 개념은 DOM에서 컨테이너 요소와는 별도로 컴포넌트가 모든 곳에서 동일하게 표시되어야한다는 것입니다.
따라서 다음과 같은 것을 피하고 싶습니다 (SASS).
// User picture component.
.user-picture {
img {..}
}
// Override user picture for the frontpage.
body.page-front .user-picture img {..}대신, 첫 페이지에서 사용자 그림이 다르게 보이도록하려면 다른 구성 요소 여야합니다. 예를 들어 SASS 상속 또는 믹스 인 사용 :
// User picture component.
.user-picture {
img {..}
}
// User picture on frontpage.
.user-picture-front {
@extend .user-picture;
img {..}
}그런 다음 첫 페이지에서 html을 조정하여 다른 버전의 사용자 그림을 사용하도록해야합니다.
여태까지는 그런대로 잘됐다. CSS 구성 요소에 대한 현재 이해를 보여주기 위해 위의 내용을 게시했습니다.
질문 : 수정 자 클래스-좋은 연습?
이제 문제가 발생했습니다. 일부 페이지는 배경이 어두운 (검은 색)이므로 텍스트, 테두리 및 내용은 흰색이어야합니다.
이것은 구성 요소를 넘어서게됩니다. 동일한 구성 요소는 기본적으로 어두운 텍스트를 가져야하지만 배경이 어두운 컨테이너 내에있는 경우 흰색 텍스트를 가져야합니다.
그래서 우리는이 멋진 아이디어를 가지고 있습니다 :
// Generic modifier class for all dark-background containers.
.white-on-black {
// Generic text color change.
color: white !important;
}
// Component.
.my-component {
border: 1px solid blue;
// Special for white-on-black.
.white-on-black & {
border-color: yellow;
}
}따라서 white-on-black내부 요소가 표시되는 방식을 수정하는 외부 "수정 자"또는 "컨텍스트"클래스 가 있습니다.
동기 부여는 컴포넌트 자체가 DOM에서 컨테이너 요소의 배경에 대한 책임이 없다는 것입니다.
작동합니다. 어두운 배경 컨테이너 안에 흰색 배경 컨테이너가있는 경우에만 문제가됩니다. 그러나 이것은 제쳐두고 작동합니다.
문제는 구성 요소를 서로 독립적으로 유지하려는 배경을 가지고 이것이 건축 적으로 좋은 방법인지 여부입니다.
대안은 예를 들어 텍스트와 테두리 my-component-on-dark-bg에서 상속되고 my-component다른 색상을 갖는 다른 구성 요소를 갖는 것 입니다. 그러나 여기에 컴포넌트 HTML을 생성하는 (예를 들어 PHP) 코드는 외부, 즉 어두운 bg가 사용되는지 여부를 알아야합니다. 구성 요소를 렌더링하는 PHP 코드가 컨테이너를 렌더링하는 PHP 코드와 분리되어 있다고 가정합니다. 여전히 관리 가능하지만 위에서 설명한 것처럼 수정 자 클래스가있는 패턴의 인수가 될 수 있습니다.
노트
우리는 실제로 CSS 클래스 앞에 프로젝트 별 접두사를 붙입니다. 나는 이것을 간단하게하기 위해 여기에 남겨두고, 어떤 프로젝트를 수행하고 있는지 아무도 모른다 :).