이 비디오에서는 스타일 시스템을 사용하여 Experience Manager의 코어 제목 구성 요소에 스타일을 지정하는 데 사용되는 CSS(또는 LESS)와 JavaScript의 해부도와 이러한 스타일이 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를 선호하는 사용자의 경우 이 코드 조각 아래에는 이 LESS이 컴파일되는 CSS가 있습니다.
/* 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은(는) 기본적으로 다음 CSS에 Experience Manager을 통해 컴파일됩니다.
/* 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 정의를 지우고 다시 사용할 수 있도록 LESS(기본적으로 AEM에서 지원됨) 또는 SCSS(사용자 지정 빌드 시스템 필요)와 같은 전처리기 사용.
선택기 가중치/특이성을 균일하게 유지합니다. 따라서 CSS 캐스케이드 충돌을 피하거나 식별하기 어려운 문제를 해결하는 데 도움이 됩니다.
각 스타일을 개별 파일로 구성합니다.
@imports
를 사용하여 결합하거나, 원시 CSS가 필요한 경우 HTML 클라이언트 라이브러리 파일 포함 또는 사용자 지정 프런트 엔드 자산 빌드 시스템을 통해 결합할 수 있습니다.여러 복잡한 스타일을 혼합하지 마십시오.
CSS 규칙을 정의하려면 항상 CSS 클래스(BEM 표기법 아래)를 사용하십시오.
응답형 그리드에 첨부되므로 BLOCK--MODIFIER
스타일을 직접 지정하지 마십시오. 이 요소의 표시를 변경하면 응답형 그리드의 렌더링 및 기능에 영향을 줄 수 있으므로 응답형 그리드의 동작을 변경하려고 할 때만 이 수준에서 스타일을 지정합니다.
BLOCK--MODIFIER
을 사용하여 스타일 범위를 적용합니다. BLOCK__ELEMENT--MODIFIERS
은 구성 요소에서 사용할 수 있지만, BLOCK
은 구성 요소를 나타내고 Component는 스타일이 지정된 것이므로 Style은 "defined" 이며 BLOCK--MODIFIER
를 통해 범위가 지정됩니다.
예제 CSS 선택기 구조는 다음과 같습니다.
첫 번째 수준 선택기 블록 - 수정자 |
두 번째 수준 선택기 블록 |
세 번째 수준 선택기 BLOCK__ELEMENT |
유효 CSS 선택기 | |
.cmp-list—dark | .cmp-list | .cmp-list__item | → | .cmp-list—dark .cmp-list .cmp-list__item { 색상: 파란색; } |
.cmp-image—hero | .cmp-image | .cmp-image__caption | → | .cmp-image—hero .cmp-image .cmp-image__caption { 색상: 빨간색; } |
중첩된 구성 요소의 경우 이러한 중첩 구성 요소 요소에 대한 CSS 선택기 깊이가 3번째 수준 선택기를 초과합니다. 중첩 구성 요소에 대해 동일한 패턴을 반복하지만 상위 구성 요소의 BLOCK
에 의해 범위가 지정됩니다. 즉, 중첩된 구성 요소의 BLOCK
을 3번째 수준에서 시작하고 중첩된 구성 요소의 ELEMENT
이 4번째 선택기 수준에 있게 됩니다.
이 섹션에 정의된 우수 사례는 "style-JavaScript" 또는 기능적 목적이 아니라 스타일을 위해 구성 요소를 조작하기 위한 JavaScript와 관련이 있습니다.
BLOCK--MODIFIERs
에 연결할 수 있습니다.BLOCK--MODIFIER BLOCK
을 통해 구성 요소를 숨기고 JavaScript의 모든 DOM 조작이 완료되면 표시합니다.