Style System and Responsive Layout

The problem the Style System solves

Without it, "the same teaser but on a dark background" becomes a new component. Then "the same teaser but centred" becomes another. Before long you maintain fifteen near-identical components that differ only by CSS class, each with its own dialog, model and tests.

The Style System ends that. You define named styles in the component's policy; each style is a label plus a CSS class. Authors pick from those styles in the component toolbar, and AEM adds the class to the component's wrapper element. One component, many appearances, no extra Java.

Configuring styles

In the template editor, open a component's policy and find the Styles tab. You define:

• Style groups — named groupings, e.g. "Background", "Alignment".
• Within a group, individual styles, each with a label (what the author sees) and a CSS class (what gets emitted).
• Whether the group allows multiple selection — one background but possibly several modifiers.

Stored on the policy as cq:styleGroups, so it is content and ships in ui.content.

Group: Background       (single select)
  Light            → cmp-teaser--light
  Dark             → cmp-teaser--dark

Group: Layout           (multi select)
  Centred          → cmp-teaser--centred
  Full bleed       → cmp-teaser--full-bleed

Then you write the CSS in ui.frontend and nothing else:

.cmp-teaser--dark {
  background: var(--color-ink);
  color: var(--color-paper);
}

Naming

Core Components emit BEM-style classes (cmp-teaser, cmp-teaser__title), and matching that convention for your modifiers keeps things predictable. Give authors labels that describe intent ("Dark background") rather than implementation ("bg-#1a1a1a") — the label is a contract with a non-technical person and should survive a redesign.

Responsive layout

Separately from styles, AEM's Layout Container provides a responsive grid, by default 12 columns. In Layout mode an author drags a component's edge to set how many columns it occupies, per breakpoint.

• Breakpoints are defined in the template's policy — typically phone, tablet and default (desktop).
• Settings are stored per breakpoint on the component node under cq:responsive.
• The emitted classes look like aem-GridColumn--tablet--6, and the grid CSS comes from the responsivegrid clientlib.
• Authors can also hide a component at particular breakpoints.

Style System or new component?

A reasonable test:

• Style System — same content model, same markup, different appearance. Dark variant, centred text, compact spacing.
• New component — different content model or fundamentally different markup. If the variant needs an extra dialog field or a different HTML structure, a style class will not carry it.

When in doubt, start with a style. Promoting a style to a component later is straightforward; retiring twelve near-duplicate components is not.