在本影片中,我們將瞭解CSS的剖析(或 LESS)和JavaScript,用來使用樣式系統設定Experience Manager核心標題元件的樣式,以及這些樣式套用至HTML和DOM的方式。
提供的AEM套件(technical-review.sites.style-system-1.0.0.zip)安裝範例標題樣式、We.Retail配置容器和標題元件的範例原則,以及範例頁面。
technical-review.sites.style-system-1.0.0.zip
以下為 LESS 在以下位置找到的範例樣式的定義:
/apps/demo/sites/style-system/clientlib-example/components/titles/styles/example.less
對於偏好使用CSS的客戶,此程式碼片段下方是CSS LESS 編譯至。
/* 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;
}
}
}
以上 LESS 會透過Experience Manager至下列CSS以原生方式編譯。
/* 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;
}
將範例樣式套用至標題元件時,下列JavaScript會收集並插入目前頁面在標題文字下方的上次修改日期和時間。
jQuery的使用是選用的,也可以選擇使用的命名慣例。
以下為 LESS 在以下位置找到的範例樣式的定義:
/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);
});
好 — 元件中的所有元素均可透過BEM標籤法定址:
<!-- Good practice -->
<div class="cmp-list">
<ul class="cmp-list__item-group">
<li class="cmp-list__item">...</li>
</ul>
</div>
不良 — 清單和清單元素僅可依元素名稱定址:
<!-- Bad practice -->
<div class="cmp-list">
<ul>
<li>...</li>
</ul>
</div>
公開更多資料並隱藏資料,總比公開太少的資料(需要未來的後端開發)來公開資料要好。
實作可製作的內容切換可協助讓此HTML保持精簡狀態,讓作者能夠選取要將哪些內容元素寫入HTML。 在將影像寫入可能無法用於所有樣式的HTML時,尤其重要。
此規則的例外情況是昂貴資源(例如影像)依預設會公開,因為在此情況下,CSS隱藏的事件影像會不必要地擷取。
保持選擇器的權重/特異性一致;這有助於避免和解決難以識別的CSS重疊顯示衝突。
將每個樣式組織成獨立檔案。
@imports
或者,如果需要原始CSS,可透過HTML使用者端資料庫檔案包含或自訂前端資產建置系統。避免混合許多複雜的樣式。
一律使用CSS類別(遵循BEM標籤法)來定義CSS規則。
避免樣式化 BLOCK--MODIFIER
直接選取,因為這會附加至回應式格線。 變更此元素的顯示可能會影響回應式格線的演算和功能,因此只有在意圖變更回應式格線的行為時才會在此層級顯示樣式。
套用樣式範圍,使用 BLOCK--MODIFIER
. 此 BLOCK__ELEMENT--MODIFIERS
可以在元件中使用,但由於 BLOCK
代表元件,而元件是設定的樣式,樣式是透過以下方式「定義」和設定範圍 BLOCK--MODIFIER
.
CSS選取器結構範例應如下所示:
第一層選擇器 區塊 — 修飾元 |
第二層級選擇器 區塊 |
第3層選擇器 區塊__素 |
有效的CSS選取器 | |
.cmp-list — 深色 | .cmp-list | .cmp-list__item | → | .cmp-list — 深色 .cmp-list .cmp-list__item { color: blue; } |
.cmp-image—hero | .cmp-image | .cmp-image__caption | → | .cmp-image—hero .cmp-image .cmp-image__caption { color: red; } |
若是巢狀元件,這些巢狀「元件」元素的CSS選取器深度將超過第3層選取器。 對巢狀元件重複相同的模式,但範圍依父元件的設定 BLOCK
. 換句話說,啟動巢狀元件的 BLOCK
位於第3層級,而巢狀元件的 ELEMENT
位於第4個選擇器層級。
本節中定義的最佳實務與「style-JavaScript」有關,或JavaScript是專門為了風格而非功能目的而操控元件。
BLOCK--MODIFIERs
.BLOCK--MODIFIER BLOCK
,並在JavaScript中的所有DOM操作完成時顯示。