스타일 시스템에서 클래스 이름이 이전 클래스 이름의 일부인 경우 클래스 이름이 렌더링되지 않습니다

클래스 이름이 이전 클래스 이름의 일부인 경우 클래스 이름이 렌더링되지 않습니다. 이 문제를 방지하려면 BEM(블록 요소 수정자) 클래스 명명 규칙을 사용하는 것이 좋습니다. 이렇게 하면 각 클래스 이름이 고유하고 렌더링 문제가 발생하지 않습니다.

설명 description

환경

Adobe Experience Manager

문제/증상

클래스 이름이 이전 클래스 이름의 일부인 경우 클래스 이름이 렌더링되지 않습니다. 예를 들어 텍스트 구성 요소 정책에 아래 스타일을 추가하는 경우:

Group name = Group

Styles can be combined = check on Styles Style1 = cmp-text__class1 Style2 = class1

그러면 렌더링된 HTML에 class1이 포함되지 않습니다.

<div class="text cmp-text__class1 aem-GridColumn aem-GridColumn--default--12"> ... </div>

For Style2 = class2, the rendered HTML contains class2.

해결 방법 resolution

AEM 6.4 이후 현재 논리에서는 클래스 이름이 이전 클래스 이름의 일부인지 확인합니다. 모든 클래스 이름이 고유하도록 하려면 BEM(블록 요소 수정자) 클래스 이름 지정 규칙을 사용하는 것이 좋습니다.