In diesem Video werden wir uns die Anatomie der CSS (oder LESS) und JavaScript ansehen, die zum Stilen der Kerntitelkomponente von Experience Manager mithilfe des Stilsystems verwendet werden, sowie die Art und Weise, wie diese Stile auf HTML und DOM angewendet werden.
Das bereitgestellte AEM-Paket (technical-review.sites.style-system-1.0.0.zip) installiert den Beispieltitelstil, Beispielrichtlinien für die Komponenten "We.Retail Layout Container"und "Titel"sowie eine Beispielseite.
technical-review.sites.style-system-1.0.0.zip
Im Folgenden finden Sie die LESS -Definition für den Beispielstil, der unter gefunden wird:
/apps/demo/sites/style-system/clientlib-example/components/titles/styles/example.less
Für diejenigen, die CSS bevorzugen, ist dieses Codefragment das CSS, in das dieses LESS kompiliert.
/* LESS */
.cmp-title--example {
.cmp-title {
text-align: center;
.cmp-title__text {
color: #EB212E;
font-weight: 600;
font-size: 5rem;
border-bottom: solid 1px #ddd;
padding-bottom: 0;
margin-bottom: .25rem
}
// Last Modified At element injected via JS
.cmp-title__last-modified-at {
color: #999;
font-size: 1.5rem;
font-style: italic;
font-weight: 200;
}
}
}
Die obigen LESS werden nativ durch Experience Manager in die folgende CSS kompiliert.
/* CSS */
.cmp-title--example .cmp-title {
text-align: center;
}
.cmp-title--example .cmp-title .cmp-title__text {
color: #EB212E;
font-weight: 600;
font-size: 5rem;
border-bottom: solid 1px #ddd;
padding-bottom: 0;
margin-bottom: 0.25rem;
}
.cmp-title--example .cmp-title .cmp-title__last-modified-at {
color: #999;
font-size: 1.5rem;
font-style: italic;
font-weight: 200;
}
Das folgende JavaScript erfasst und fügt das Datum und die Uhrzeit der letzten Änderung der Seite unter dem Titeltext ein, wenn der Beispielstil auf die Titelkomponente angewendet wird.
Die Verwendung von jQuery sowie die verwendeten Benennungskonventionen sind optional.
Im Folgenden finden Sie die LESS -Definition für den Beispielstil, der unter gefunden wird:
/apps/demo/sites/style-system/clientlib-example/components/titles/styles/js/title.js
/**
* JavaScript supporting Styles may be re-used across multi Component Styles.
*
* For example:
* Many styles may require the Components Image (provided via an <img> element) to be set as the background-image.
* A single JavaScript function may be used to adjust the DOM for all styles that required this effect.
*
* JavaScript must react to the DOMNodeInserted event to handle style-switching in the Page Editor Authoring experience.
* JavaScript must also run on DOM ready to handle the initial page load rendering (AEM Publish).
* JavaScript must mark and check for elements as processed to avoid cyclic processing (ie. if the JavaScript inserts a DOM node of its own).
*/
jQuery(function ($) {
"use strict;"
moment.locale("en");
/**
* Method that injects p element, containing the current pages last modified date/time, under the title text.
*
* Similar to the CSS Style application, component HTML elements should be targeted via the BEM class names (as they define the stable API)
* and targeting "raw" elements (ex. "li", "a") should be avoided.
*/
function applyComponentStyles() {
$(".cmp-title--example").not("[data-styles-title-last-modified-processed]").each(function () {
var title = $(this).attr("data-styles-title-last-modified-processed", true),
url = Granite.HTTP.getPath() + ".model.json";
$.getJSON(url, function(data) {
var dateObject = moment(data['lastModifiedDate']),
titleText = title.find('.cmp-title__text');
titleText.after($("<p>").addClass("cmp-title__last-modified-at").text("Last modified " + dateObject.fromNow()));
});
});
}
// Handle DOM Ready event
applyComponentStyles();
// Apply Styles when a component is inserted into the DOM (ie. during Authoring)
$(".responsivegrid").bind("DOMNodeInserted", applyComponentStyles);
});
Gut : Alle Elemente in der Komponente können mit der BEM-Notation adressiert werden:
<!-- Good practice -->
<div class="cmp-list">
<ul class="cmp-list__item-group">
<li class="cmp-list__item">...</li>
</ul>
</div>
Schlecht - Die Listen- und Listenelemente können nur nach Elementnamen adressiert werden:
<!-- Bad practice -->
<div class="cmp-list">
<ul>
<li>...</li>
</ul>
</div>
Es ist besser, mehr Daten verfügbar zu machen und sie zu verbergen, als zu wenig Daten verfügbar zu machen, die eine zukünftige Back-End-Entwicklung erfordern, um sie verfügbar zu machen.
Das Implementieren von Authoring-fähigen Inhaltswechseln kann dazu beitragen, diesen HTML-Lean beizubehalten, wodurch Autoren auswählen können, welche Inhaltselemente in den HTML-Code geschrieben werden. Die kann besonders beim Schreiben von Bildern in HTML wichtig sein, die möglicherweise nicht für alle Stile verwendet werden.
Die Ausnahme von dieser Regel besteht darin, dass teure Ressourcen, z. B. Bilder, standardmäßig bereitgestellt werden, da von CSS ausgeblendete Ereignisbilder in diesem Fall unnötigerweise abgerufen werden.
Das Stilsystem unterscheidet sich geringfügig von BEM insofern, als BLOCK
und BLOCK--MODIFIER
nicht auf dasselbe Element angewendet werden, wie in BEM angegeben.
Stattdessen wird aufgrund von Produktbeschränkungen BLOCK--MODIFIER
auf das übergeordnete Element des Elements BLOCK
angewendet.
Alle anderen Mandanten von BEM sollten mit ausgerichtet werden.
Verwenden Sie Präprozessoren wie LESS (unterstützt von AEM nativ) oder SCSS (erfordert ein benutzerdefiniertes Build-System), um eine klare CSS-Definition und Wiederverwendbarkeit zu ermöglichen.
Selektorgewicht/Spezifität einheitlich halten; Dies hilft, schwierige CSS-Kaskadierkonflikte zu vermeiden und zu beheben.
Organisieren Sie jeden Stil in einer separaten Datei.
@imports
kombiniert werden oder, wenn rohe CSS erforderlich ist, über die Einbindung der HTML Client-Bibliotheksdatei oder benutzerdefinierte Frontend-Asset-Build-Systeme.Vermeiden Sie das Mischen vieler komplexer Stile.
Verwenden Sie immer CSS-Klassen (nach BEM-Notation), um CSS-Regeln zu definieren.
Vermeiden Sie die direkte Formatierung von BLOCK--MODIFIER
, da diese an das responsive Raster angehängt ist. Eine Änderung der Anzeige dieses Elements kann sich auf das Rendering und die Funktionalität des responsiven Rasters auswirken. Daher wird der Stil nur auf dieser Ebene festgelegt, wenn das Verhalten des responsiven Rasters geändert werden soll.
Wenden Sie den Stilbereich mit BLOCK--MODIFIER
an. BLOCK__ELEMENT--MODIFIERS
kann in der Komponente verwendet werden, da BLOCK
jedoch die Komponente darstellt und die Komponente den Stil aufweist, ist der Stil "definiert"und über BLOCK--MODIFIER
erfasst.
Beispiel für eine CSS-Selektorstruktur:
Auswahl der ersten Ebene BLOCK—MODIFIER |
Auswahl der zweiten Ebene BLOCK |
Auswahl auf dritter Ebene BLOCK_ELEMENT |
Effektiver CSS-Selektor | |
.cmp-list—dark | .cmp-list | .cmp-list_item | → | .cmp-list—dark .cmp-list .cmp-list_item { color: blau; } |
.cmp-image—hero | .cmp-image | .cmp-image_caption | → | .cmp-image—hero .cmp-image .cmp-image_caption { color: rot; } |
Bei verschachtelten Komponenten überschreitet die CSS-Selektortiefe für diese verschachtelten Komponentenelemente die Selektortiefe der dritten Ebene. Wiederholen Sie das gleiche Muster für die verschachtelte Komponente, jedoch in den Bereich BLOCK
der übergeordneten Komponente. Oder mit anderen Worten: Starten Sie das BLOCK
der verschachtelten Komponente auf der dritten Ebene und das ELEMENT
der verschachtelten Komponente befindet sich auf der vierten Selektorebene.
Die in diesem Abschnitt definierten Best Practices beziehen sich auf "Stil-JavaScript"oder JavaScript, das speziell dazu bestimmt ist, die Komponente für stilistische anstatt für funktionale Zwecke zu bearbeiten.
BLOCK--MODIFIERs
angehängt werden.BLOCK--MODIFIER BLOCK
aus und zeigen Sie sie an, wenn alle DOM-Manipulationen in JavaScript abgeschlossen sind.