다중 클래스를 사용하여 CSS 블롯 해제

다른 특성을 가진 6개의 서로 다른 100px 정사각형 상자가 필요하다고 가정해 봅시다.

• 테두리가 있는 빨간색
• 테두리가 있는 파란색
• 테두리가 있는 녹색
• 테두리 없는 빨간색
• 테두리 없는 파란색
• 테두리 없는 녹색

다음과 같이 각 항목에 대해 고유한 클래스를 만들 수 있습니다.

.redwithborder {
   width: 100px;
   height: 100px;
   margin: 10px;
   float: left;
   background-color: red;
   border: 3px solid black;
}
.bluewithborder {
   width: 100px;
   height: 100px;
   margin: 10px;
   float: left;
   background-color: blue;
   border: 3px solid black;
}
...etc

하지만 이것은 CSS Bloat라고 불리는데, 불필요한 반복 코드를 포함하고 있기 때문입니다. 대신, 각 클래스가 매우 구체적인 내용을 처리하는 간단하고 식별 가능한 이름을 가진 다섯 개의 클래스만 만드십시오.

.box {
   width: 100px;
   height: 100px;
   margin: 10px;
   float: left;
}
.red {
   background-color: red;
}
.blue {
   background-color: blue;
}
.green {
   background-color: green;
}
.border {
   border: 3px solid black;
}

HTML에서는 모든 것이 깔끔해 보입니다. div에 적용할 각 클래스 사이에 공백을 둡니다.

 <div class="red border box">
    </div>

 <div class="blue border box">
    </div>

 <div class="green border box">
    </div>

 <div class="red box">
    </div>

 <div class="blue box">
    </div>

 <div class="green box">
    </div>

이 방법은 미래의 유연성 향상도 가능하게 한다. 오렌지 상자나 배경 이미지 또는 완전히 다른 특성을 가진 상자를 만들고 싶다면 그렇게 할 수 있습니다. 그런 다음 새 상자에 테두리를 추가하면 공백과 "경계선" 클래스 이름이 추가됩니다.

[예시 페이지]