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 */-->

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>

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}">

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>