Sightly is the new HTML templating system for AEM. Our style guide for frontend and backend developers helps to keep your Sightly scripts clean and easy to read.

When Adobe Experience Manager (AEM) 6.0 was introduced, it came with a new HTML templating system called Sightly. Sightly replaces JSP/ESP files and is now the preferred way of processing HTML files in on the server for AEM projects.

Why do we need a style guide?

Sightly is the middle layer where frontend and backend developers come together and work on the same files. It’s important that both sides develop in a common way so that the Sightly scripts remain clean and easy to read. The problems that often arise over time:

It’s difficult to read complex Sightly scripts.

It’s hard to see what the final HTML markup will be.

Extra and unnecessary HTML gets rendered in the final markup.

Often developers write their Sightly code with different priorities in mind. For frontend developers, the HTML must be well structured, semantic and accessible. While for backend developers the data, validation and security are the most important topics. This results in a variety of code styles and ways to write Sightly scripts.

I created this style guide to maintain a consistent code base and avoid confusion between developers. These easy to follow rules will help to make Sightly live up to the meaning of its name.

The name “Sightly” (meaning “pleasing to the eye”) highlights its focus on keeping your markup beautiful, and thus maintainable, once made dynamic.

Sightly style guide

1. HTML

1.1 Always self-close HTML void elements

Although the self-closing "/" is optional in HTML5, not adding it in your Sightly script could result in errors.