CSS 조직화 및 확장
새로운 프로젝트에서 첫 번째 스타일시트를 작성하는 것은 즐겁습니다. 몇 백 줄 정도 진행되면 뭔가 변합니다: 한 버튼의 색상을 변경하면 다른 세 버튼도 변하고, 헤딩은 !important를 붙일 때까지 움직이지 않으며, 새로운 규칙마다 이전 규칙을 깨뜨릴 수 있을 것 같습니다. CSS 자체는 여전히 올바릅니다. 부족한 것은 이를 지탱하는 구조이며, 구문이 아닌 바로 이 구조가 스타일시트가 천 줄에서 유지 가능한지 십만 줄에서도 유지 가능한지를 결정합니다.
CSS가 확장하기 어려운 이유
CSS는 기본적으로 전역입니다. 작성하는 모든 규칙은 페이지 어디든 일치하는 모든 요소에 도달할 수 있습니다. p { color: navy; }를 작성하면 의도했는지 여부와 관계없이 전체 프로젝트의 모든 단락이 남색이 됩니다. 작은 페이지에서는 편리합니다. 프로젝트가 성장함에 따라 이것이 대부분의 문제의 근원입니다.
문제는 규칙이 충돌할 때 나타납니다. 두 스타일시트가 모두 p를 대상으로 하거나, 일반적인 규칙과 특정 규칙이 모두 같은 요소에 적용되면, 어느 것이 이기는지 알아내야 합니다. CSS가 작동하는 방식에서 이 메커니즘을 본 적이 있습니다: 브라우저는 특이성과 순서로 충돌을 해결합니다. CSS를 잘 확장하는 것은 대부분 처음부터 이러한 충돌을 만들지 않는 것입니다.
/* 페이지의 모든 단락에 도달하는 하나의 전역 규칙 */
p {
color: navy;
}
/* 다른 곳의 두 번째 규칙, 같은 요소들에 경쟁 */
.notice p {
color: crimson; /* .notice 내에서 승리: 더 구체적 */
}
특이성을 낮고 평탄하게 유지
가장 유용한 단일 습관은 **클래스**로 스타일을 지정하고, 대부분의 경우 한 번에 하나의 클래스를 사용하는 것입니다. .card와 같은 클래스는 빠르게 적용되고, 재사용 가능하며, 나중에 필요하면 재정의하기 쉬습니다. 단일 클래스는 낮고 온화한 특이성 수준이기 때문입니다.
문제는 두 가지에서 옵니다: ID와 긴 선택자 체인입니다. #header와 같은 ID는 클래스보다 재정의하기 훨씬 어렵고, .sidebar ul li a와 같은 체인은 하나의 정확한 구조에 묶입니다. 원하는 곳 어디든 배치할 수 있는 일반 클래스를 선호하세요:
/* 선호: 단일 클래스, 낮고 평탄 */
.nav-link {
color: navy;
}
/* 피하기: ID, 나중에 재정의하기 어려움 */
#nav-link {
color: navy;
}
/* 피하기: 깊은 체인, 취약하고 더 높은 특이성 */
.sidebar nav ul li a {
color: navy;
}card 또는 nav-link처럼. 단일 클래스는 빠르게 재사용하기 쉽고 나중에 재정의하기 쉬우며, 이것이 정확히 원하는 것입니다. #header와 같은 ID와 .sidebar ul li a와 같은 긴 체인을 피하세요. 둘 다 변경하기 훨씬 더 어렵습니다. 명명 규칙
클래스로 스타일을 지정하면 다음 질문은 이름을 무엇으로 지을 것인가 하는 것입니다. .blue 또는 .thing2와 같은 이름은 빠르게 분해됩니다. 클래스가 무엇을 하는지, 어디에 속하는지 아무것도 알려주지 않기 때문입니다. **명명 규칙**은 클래스를 이름 지을 합의된 방법이므로 이름이 클래스가 무엇을 하는지, 어디에 속하는지를 알려줍니다.
널리 사용되는 것을 BEM이라고 합니다. Block, Element, Modifier를 나타냅니다. 블록은 카드와 같은 컴포넌트입니다. 엘리먼트는 그 안의 부분으로, 두 개의 밑줄로 작성됩니다. 모디파이어는 변형으로, 두 개의 대시로 작성됩니다:
/* 블록: 컴포넌트 자체 */
.card { }
/* 엘리먼트: 블록의 부분, 두 개의 밑줄 */
.card__title { }
.card__body { }
/* 모디파이어: 블록의 변형, 두 개의 대시 */
.card--featured { }<article class="card card--featured">
<h2 class="card__title">주말 워크숍</h2>
<p class="card__body">레이아웃에 대한 짧은 소개.</p>
</article>card와 같은 블록, 두 개의 밑줄이 있는 card__title과 같은 그 안의 엘리먼트, 두 개의 대시가 있는 card--featured와 같은 변형. BEM을 사용할 필요는 없지만, 일관된 체계를 선택하고 그것을 고수하세요. 파일 구조화
스타일시트가 성장함에 따라 하나의 긴 파일은 탐색하기 어려워집니다. 일반적인 해결책은 CSS를 몇 개의 폴더로 나누는 것입니다. 규칙이 수행하는 역할에 따라: 기본 스타일(body 및 제목과 같은 일반 요소의 기본값), 컴포넌트(카드, 버튼 및 기타 조각), 유틸리티(간격 또는 텍스트 정렬 클래스와 같은 작은 단일 목적 헬퍼).
파일을 나눌 때 한 가지 세부 사항이 중요합니다: 로드하는 순서입니다. 두 규칙이 같은 특이성을 가지면, 나중에 오는 것이 승리합니다. 따라서 나중에 로드된 스타일시트는 이전 규칙을 재정의할 수 있습니다. 가장 일반적인 것부터 가장 구체적인 것까지 파일을 로드하세요:
/* main.css: 순서는 최소에서 최대 특이성으로 실행 */
@import "base/reset.css"; /* 요소 기본값 */
@import "base/typography.css";
@import "components/card.css"; /* 자체 포함 조각 */
@import "components/button.css";
@import "utilities/spacing.css"; /* 마지막에 로드되므로 재정의할 수 있음 */
@import "utilities/text.css";캐스케이드를 명시적으로 만들기
지금까지 모든 것은 규칙에 의해 캐스케이드를 관리 가능하게 유지합니다: 낮은 특이성, 좋은 이름, 신중한 파일 순서. 더 깊이 나가면서 더 많은 것이 있으며, 여행 방향을 알 가치가 있습니다. 최신 CSS는 파일이 앉는 곳에 의존하는 대신 직접 순서를 제어하고, 더 많은 사람들이 같은 스타일시트에서 작업할 때 캐스케이드를 예측 가능하게 유지하는 방법을 제공합니다. 당신은 프로젝트가 성장함에 따라 이러한 도구들을 만날 것이고, 위의 습관들이 당신을 그것들을 위해 준비합니다.