What is the best way to handle page-specific styles? I have a number of pages that use the same template but require slightly different CSS for styling certain elements on the page. In other systems I've worked with, this is usually done by having a CSS class specific to that page, however, I was curios if there is an AEM way of handling this sort of thing.
The method you've used in other systems will work fine in AEM, too. Simply expose a property via your template's page properties cq:dialog (`./pageClass` for example), and output the value of that property into the class attribute of your template's HTML element. In JSP:
<html class="<%= xssAPI.encodeForHTMLAttr(properties.get("pageClass", "")) %>">or Sightly:
<html class="${properties.pageClass}">You can now define your page specific styles as follows (for example, to style paragraphs when pageClass is set to 'homePage'):
.homePage p { margin: 0 1em; }A general discussion on the topic can be found here [0].
[0] https://css-tricks.com/why-use-classes-or-ids-on-the-html-element/
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.