Using Core Components and BEM CSS classes

Below could be a great starting point.

nirmaljosehere​

This doesn't answer original question whether ui team need to follow BEM NOTATION?

Hi Santhi

Core Component has been created using adobe's best practices and recommended by Adobe for component development as a reference.

• For core component, Adobe uses BEM methodology which is highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit, and a lot more strict.
• Component development best practices outline that CSS rules should target BEM (Block Element Modifier) CSS class names, and these BEM CSS classes are considered the stable HTML API of the component.

It will be good if you follow the same approach.

Reference: Getting Started with Core Components and the AEM Style System - Part 6 - Applying the Teaser Component CSS-based Styles

Regards,

Arpit Varshney

Thanks guys. In addition, I think the component wrapper div element plays a key role here and must be configured via style system for all components. Say if there are two different lists to be displayed o the page, the wrapper div element would be different fro two lists. Use the same core proxy component for both but with style system handling the wrapper divs.

You can use container components well to combine 2 or more components and apply style on both together.

Style can also be added to the container component.

We are also working with Core components heavily.

Layout mode, Experience Fragments also play a big role if you are going to rely on core components only.