CSS 규칙을 직접 참조하지 않고 어떻게 재사용할 수 있나요?

CSS 규칙 참조: 규칙 재사용 기술의 이해

CSS는 코드 재사용성을 수용하지만 내부에서 하나의 규칙 세트를 직접 참조하는 기능을 제공합니다. 또 다른 하나는 아직 파악하기 어렵습니다. 그러나 유사한 효과를 달성하고 코드 효율성을 유지하는 다른 방법이 있습니다.

제공된 예에서는

<div class="someDiv"></div>

.opacity { filter: ... }
.radius { ... }

불투명도와 반경 스타일을 모두 적용해야 하는 문제에 직면합니다. someDiv 요소에 추가합니다.

규칙을 참조하는 대신 여러 항목에서 선택기를 재사용할 수 있습니다. 규칙 세트:

.opacity, .someDiv { ... }
.radius, .someDiv { ... }

이 접근 방식은 someDiv 요소에 두 가지 규칙 세트를 모두 적용합니다.

또는 단일 규칙 세트에 여러 선택기를 사용할 수 있습니다.

.opacity.radius { ... }

이 접근 방식을 사용하려면 HTML 요소에 여러 클래스를 추가해야 합니다.

<div class="opacity radius"></div>

코드를 향상하려면 명확성을 위해서는 요소의 모양보다는 목적을 설명하는 클래스 이름을 사용하는 것이 좋습니다. 문제를 분리하고 유연성을 유지하려면 CSS 스타일시트 내에 스타일 세부정보를 유지하세요.

위 내용은 CSS 규칙을 직접 참조하지 않고 어떻게 재사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!