In style system, when class name is part of preceding class name, the class name is not rendered

When a class name is part of a preceding class name, the class name is not rendered. To avoid this issue, it is recommended to use a Block Element Modifier (BEM) class naming convention. This ensures that each class name is unique and prevents any rendering issues.

Description description

Environment

Adobe Experience Manager

Issue/Symptoms

When a class name is part of a preceding class name, the class name is not rendered. For example, adding below styles to a text component policy:

Group name = Group

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

Then the rendered HTML does not contain class1.

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

For Style2 = class2, the rendered HTML contains class2.

Resolution resolution

Since AEM 6.4, the current logic checks if a class name is part of a preceding class name. It is recommended to use a Block Element Modifier (BEM) class naming convention to ensure that every class name is unique.