이 비디오에서는 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 는 기본적으로 다음 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로 숨겨진 이벤트 이미지가 이 경우 불필요한 가져오므로 이미지 등 비용이 많이 드는 리소스가 기본적으로 노출되는 경우입니다.
다음과 같은 전처리기 사용 LESS (기본적으로 AEM에서 지원됨) 또는 SCSS CSS 정의를 지우고 다시 사용할 수 있도록 사용자 지정 빌드 시스템 필요.
선택기 가중치/특이성을 균일하게 유지합니다. 따라서 CSS 캐스케이드 충돌을 피하거나 식별하기 어려운 문제를 해결하는 데 도움이 됩니다.
각 스타일을 개별 파일로 구성합니다.
@imports
또는 HTML 클라이언트 라이브러리 파일 포함 또는 사용자 지정 프런트 엔드 자산 빌드 시스템을 통해 원시 CSS가 필요한 경우여러 복잡한 스타일을 혼합하지 마십시오.
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
세 번째 수준에서 중첩 구성 요소의 ELEMENT
은 4번째 선택기 수준에 있습니다.
이 섹션에 정의된 우수 사례는 "style-JavaScript" 또는 기능적 목적이 아니라 스타일을 위해 구성 요소를 조작하기 위한 JavaScript와 관련이 있습니다.
BLOCK--MODIFIERs
.BLOCK--MODIFIER BLOCK
를 반환하고, JavaScript의 모든 DOM 조작이 완료되면 표시합니다.