콤비네이션
동일한 속성을 가진 여러 선택기를 반복할 필요는 없으며 선택기를 쉼표(,)로 구분하기만 하면 됩니다.
예를 들어 다음 코드가 있습니다.
h2 { 색상: 빨간색 }
.thisOtherClass { 색상: 빨간색 }
.yetAnotherClass { 색상: 빨간색 }
그런 다음 다음과 같이 작성할 수 있습니다.
h2, .thisOtherClass, .yetAnotherClass { 색상: 빨간색 }
구성을 사용하면 여러 CSS를 한 번에 정의하여 많은 바이트와 시간을 절약할 수 있습니다.
중첩됨
CSS가 잘 구조화되어 있으면 너무 많은 클래스나 식별자 선택기를 사용할 필요가 없습니다. 선택기 내에서 선택기를 지정할 수 있기 때문입니다. (또는 더 나은 표현은 컨텍스트 선택기 - 번역자에 의한 것입니다)
예를 들어:
#top { 배경색: #ccc: 1em }
#top h1 { 색상: #ff0 }
#top p { 색상: 빨간색; 글꼴 두께: 굵게 }
다음과 같이 HTML에 적용하면 불필요한 클래스 또는 식별자 선택기가 제거됩니다.
<div id="맨 위">
<h1>초콜릿 카레</h1> <p>순수한 초콜릿만으로 카레를 만드는 저의 레시피입니다</p> <p>으으으으으으으으으으으으</p>
</div>
이는 공백으로 구분된 영문 반자 선택기를 사용하여 ID ID의 h1에 색상이 "#ff0"이고 p가 빨간색이고 굵게 지정되어 있기 때문입니다.
이것은 약간 복잡할 수도 있습니다(내부 내부 내부 등 두 개 이상의 수준이 있을 수 있기 때문입니다). 더 많이 연습해야합니다.
중첩을 사용하면 CSS 코드를 더 명확하게 읽을 수 있고 지정한 요소에 대해 CSS를 사용자 정의할 수 있습니다.