Rules for AEM front end development

[virginiarcruz]

Folks,

I'm starting now in AEM.

Are there any HTML / CSS / JS rules that should be followed for development?

Any practice that should be avoided?

I ask this because I have observed that in the workflow the static HTML is developed for the product and when it is passed to implement in AEM we have some problems running in static but not working in AEM.

For example: use measures like height: 100vh in css, break in edit mode of AEM.

Are there any rules in this regard to improve the flow of development?

[smacdonald2008]

Here are some thoughts to get you started:

To develop AEM components - you should use HTL. See - htl-spec/SPECIFICATION.md at master · Adobe-Marketing-Cloud/htl-spec · GitHub

.

HTL can include Java side too - see this for an example -  Scott's Digital Community: Creating an AEM HTML Template Language component that uses the WCMUsePojo...

(different AEM Versions are referenced here)

When building dialog components - you should Granite Resource types.  Avoid using JSPs and Classic UI data types.

See this article to learn how to work with HTL and granite data types: Building Experience Manager Components using Granite/Coral Resource Types

When building AEM sites in 6.3/6.4 - you should use Editable Templates. See this article -- Adobe Experience Manager Help | Creating an Adobe Experience Manager 6.4 website using Editable Temp...  (also includes how to handle CSS included in a site - notice the use of a client library)

When building AEM projects - use Maven and the AEM IDE plug-in tool - details here - see: Getting Started with AEM Sites - WKND Tutorial

These resources should get you up and running.

[smacdonald2008]

As you are new in AEM - see this resource as well -- Getting Started with AEM-Sites

[smacdonald2008]

As far as CSS rules when using AEM - there is not a document that list which CSS rules should and should not be used.

[virginiarcruz]

thanks for the help

I'm going read this articles for understand better about development AEM