HTL Style Guide

Style guide for HTL, the HTML templating language used in the Adobe Experience Manager Core Components.

Contents

• Comments
• Block Statements
• Expression Language

Comments

Prefer HTL Comments Over HTML Comments

HTML comments are rendered in the final markup, so unless there is a specific need, HTL comments are always preferred.

<!-- Don't use HTML comments -->

<!--/* Do use HTL comments */-->

↑ Back to top

Block Statements

Style guide for HTL Block Statements.

Don't Use sly Elements Unless Necessary

<!--/* Instead of */-->
<sly data-sly-test.title="${component.title}">
  <h1>${title}</h1>
</sly>

<!--/* Use */-->
<h1 data-sly-test.title="${component.title}">${title}</h1>

Don't Use a Self-closing sly Element

Rather than <sly/>, use <sly></sly>, as the sly element is neither a void nor foreign element. See html5 start tags.

Prefer data-sly-repeat Over data-sly-list

Use data-sly-repeat over data-sly-list, in order to avoid creating unnecessary sly tags.

<!--/* Instead of */-->
<sly data-sly-list.child="${container.children}">
  <div data-sly-resource="${child}"></div>
</sly>
 
<!--/* Use */-->
<div data-sly-repeat.child="${container.children}" data-sly-resource="${child}"></div>

Re-use data-sly-test Variables

If a data-sly-test is used multiple times, define a variable and re-use it, for performance reasons.

<!--/* Instead of */-->
<h1 data-sly-test="${component.textEnabled}">${component.title}</h1>
    ...
<p data-sly-test="${component.textEnabled}">${component.description}<p>

<!--/* Use */-->
<h1 data-sly-test.textEnabled="${component.textEnabled}">${component.title}</h1>
   ...
<p data-sly-test="${textEnabled}">${component.description}<p>

Place HTL Block Statements Before Regular HTML Attributes

Defining HTL block statements first means that variables are available for use in the regular HTML attributes, and that block statements (particularly data-sly-test, data-sly-list and data-sly-repeat) statements are prominent.

<!--/* Instead of */-->
<h1 class="cmp-component__title" data-sly-test="${component.title}">${component.title}</h1>

<!--/* Use */-->
<h1 data-sly-test="${component.title}" class="cmp-component__title">${component.title}</h1>

↑ Back to top

Expression Language

Style Guide for HTL Expression Language.

Simplify String Expressions Involving the Ternary Operator

<!--/* Instead of */-->
<div class="${cssClass ? cssClass : 'my-class'}"></div>

<!--/* Use */-->
<div class="${cssClass || 'my-class'}"></div>

Simplify String Expressions Based on a Test

<!--/* Instead of */-->
<div data-sly-test=“{image.titleAsPopup}" title="${image.title}”>

<!--/* Use */-->
<div title="${image.titleAsPopup && image.title}">

Only Set a Display Context If Necessary

In most cases the display context can be left out as it is determined automatically.

<!--/* Instead of */-->
<a href="${component.link @ context = 'uri'}"></a>

<!--/* Use */-->
<a href="${component.link}"></a>

Prefer the Extension Option for Links Over a Hardcoded Extension

<!--/* Instead of */-->
<a href="${component.link}.html"></a>

<!--/* Use */-->
<a href="${component.link @ extension='html'}"></a>

Drop Method Prefixes When Accessing Properties from Java Getter Functions

Java getter functions such as getTitle() or isActive() can be accessed without the get or is prefixes and lowering the case of the following character. All properties should be accessed this way for consistency and readability.

<!--/* Instead of */-->
<p>${component.getTitle}</p>

<!--/* Use */-->
<p>${component.title}</p>

<!--/* Instead of */-->
<a href="${item.link}" data-sly-unwrap="${item.isActive}">...</a>

<!--/* Use */-->
<a href="${item.link}" data-sly-unwrap="${item.active}">...</a>

↑ Back to top