Understanding Style System Best Practices
Please review the content at Understanding how to code for the Style System , to ensure an understanding of the BEM-like conventions used by AEM Style System.
There are two main flavors or styles that are implemented for the AEM Style System:
- Layout styles
- Display styles
Layout styles affect many elements of a Component to create a well define and identifiable rendition (design and layout) of the component, often aligning to a specific re-useable Brand concept. For example, a Teaser component may be able to be presented in the traditional card-based layout, a horizontal Promotional style or as a Hero layout overlaying text on an image.
Display styles are used to affect minor variations to Layout styles, however, they do not change the fundamental nature or intent of the Layout style. For example, a Hero layout style may have Display styles that change the color scheme from the primary brand color scheme to the secondary brand color scheme.
Style organization best practices
When defining the style names available to AEM authors, it is best to:
- Name styles using a vocabulary understood by the authors
- Minimize the number of style options
- Only expose style options and combinations that are allowed by brand standards
- Only expose style combinations that have an effect
- If ineffective combinations are exposed, ensure they at least do not have an ill effect
As the number of possible style combinations available to AEM authors increases, the more permutations exist that must be QA'd and validated against brand standards. Too many options can also confuse authors as it may become unclear which option or combination is required to produce the desired effect.
Style names vs CSS classes
Style names, or the options presented to AEM authors, and the implementing CSS class names are decoupled in AEM.
This allows Style options to be labeled in a vocabulary clear and understood by the AEM authors, but lets CSS developers name the CSS classes in a future-proof, semantic manner. For example:
A component must have the options to be colored with the brand's primary and secondary colors, however, the AEM authors know the colors as green and yellow , rather than the the design language of primary and secondary.
The AEM Style System can expose these coloring Display styles using author-friendly labels Green and Yellow , while allowing the CSS developers to use semantic naming of .cmp-component--primary-color and .cmp-component--secondary-color to define the actual style implementation in CSS.
The Style name of Green is mapped to .cmp-component--primary-color , and Yellow to .cmp-component--secondary-color .
If the company's brand color change in the future, all that needs to be changed is the single implementations of .cmp-component--primary-color and .cmp-component--secondary-color , and the Style names.