Is using id as a css selector recommended practice in AEM?

[alankzp]

Normally, in web development, it is best practice to use classes on html elements and id's are rarely used.

At my organization, seems like id's are being put on authored components a lot and that is used for adding style changes.

Is this bad practice or is this regular practice in aem?

[rawvarun]

Avoid using ID as a selector until you have no option but to use it.

[AsifChowdhury · Accepted solution]

Hello @alankzp 

You can see in the core component there is also an ID field in the author dialog.

In Adobe Experience Manager (AEM), the use of ID selectors for styling is generally discouraged. AEM follows a component-based approach to building web pages, where components are reusable and self-contained entities that encapsulate functionality and presentation.

The reason AEM Core Components provide an ID field in the author dialog is to allow authors to assign unique IDs to individual instances of components. These IDs can be useful for specific use cases such as tracking analytics events, implementing custom JavaScript functionality, or providing anchor points for navigation within a page.

However, it's important to note that using ID selectors for styling in AEM is generally not recommended because it can lead to specificity conflicts and cause maintenance issues. Instead, AEM encourages the use of class-based selectors and component hierarchy for styling components.

By using class selectors and leveraging the component structure and CSS classes provided by AEM Core Components, you can achieve consistent styling across different instances of components without the risk of conflicting IDs or tightly coupling styling with specific instances.

So while the ID field is available in AEM Core Components, its primary purpose is for non-styling use cases, and it's best to rely on class selectors for styling components in AEM.