Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Using Core Components and BEM CSS classes

Avatar

Avatar
Validate 1
Level 2
Santhi_Swaroop
Level 2

Likes

16 likes

Total Posts

28 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 1
Level 2
Santhi_Swaroop
Level 2

Likes

16 likes

Total Posts

28 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile
Santhi_Swaroop
Level 2

09-10-2019

If I want to develop a site using only core components with no customized components, do I need to ask the design and css teams to develop the css classes with BEM notation same as in core components? How do the coordination between AEM teams and design teams work and what are the best practices?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Ignite 1
MVP
Ankur_Khare
MVP

Likes

159 likes

Total Posts

370 posts

Correct Reply

58 solutions
Top badges earned
Ignite 1
Validate 10
Validate 1
Give Back 50
Give Back 5
View profile

Avatar
Ignite 1
MVP
Ankur_Khare
MVP

Likes

159 likes

Total Posts

370 posts

Correct Reply

58 solutions
Top badges earned
Ignite 1
Validate 10
Validate 1
Give Back 50
Give Back 5
View profile
Ankur_Khare
MVP

10-10-2019

Hi  Santhi ,

I think what you need to do is-

1. Identify what all components you will be using from core components.

2. Create a page using these components

3. Identify the classes used there

4. Share the same with design team

Summit2018/chapters/chapter-4 at L725 · Adobe-Marketing-Cloud/Summit2018 · GitHub

Refer below chapters for better understanding-

Summit2018/chapters at L725 · Adobe-Marketing-Cloud/Summit2018 · GitHub

https://helpx.adobe.com/experience-manager/kt/sites/using/style-system-core-components-tutorial-deve...

Answers (5)

Answers (5)

Avatar

Avatar
Validate 1
Level 2
Santhi_Swaroop
Level 2

Likes

16 likes

Total Posts

28 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 1
Level 2
Santhi_Swaroop
Level 2

Likes

16 likes

Total Posts

28 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile
Santhi_Swaroop
Level 2

11-10-2019

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.

Avatar

Avatar
Validate 1
MVP
ArpitVarshney
MVP

Likes

135 likes

Total Posts

185 posts

Correct Reply

36 solutions
Top badges earned
Validate 1
Establish
Give Back 5
Give Back 3
Give Back 25
View profile

Avatar
Validate 1
MVP
ArpitVarshney
MVP

Likes

135 likes

Total Posts

185 posts

Correct Reply

36 solutions
Top badges earned
Validate 1
Establish
Give Back 5
Give Back 3
Give Back 25
View profile
ArpitVarshney
MVP

09-10-2019

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 Compone...

Regards,

Arpit Varshney

Avatar

Avatar
Validate 1
MVP
Nirmal_Jose
MVP

Likes

119 likes

Total Posts

207 posts

Correct Reply

58 solutions
Top badges earned
Validate 1
Establish
Coach
Contributor
Shape 1
View profile

Avatar
Validate 1
MVP
Nirmal_Jose
MVP

Likes

119 likes

Total Posts

207 posts

Correct Reply

58 solutions
Top badges earned
Validate 1
Establish
Coach
Contributor
Shape 1
View profile
Nirmal_Jose
MVP

09-10-2019

Below could be a great starting point.

Screenshot 2019-05-30 at 22.41.31.png

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,356 likes

Total Posts

3,227 posts

Correct Reply

917 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,356 likes

Total Posts

3,227 posts

Correct Reply

917 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

11-10-2019

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.

Avatar

Avatar
Ignite 1
MVP
Ankur_Khare
MVP

Likes

159 likes

Total Posts

370 posts

Correct Reply

58 solutions
Top badges earned
Ignite 1
Validate 10
Validate 1
Give Back 50
Give Back 5
View profile

Avatar
Ignite 1
MVP
Ankur_Khare
MVP

Likes

159 likes

Total Posts

370 posts

Correct Reply

58 solutions
Top badges earned
Ignite 1
Validate 10
Validate 1
Give Back 50
Give Back 5
View profile
Ankur_Khare
MVP

09-10-2019

nirmaljosehere

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