이 비디오에서는 CSS의 구조를 살펴봅니다(또는 LESS) 및 JavaScript를 사용하여 스타일 시스템을 사용하여 Experience Manage의 핵심 제목 구성 요소의 스타일을 지정하고 이러한 스타일을 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에 의해 숨겨진 이벤트 이미지를 불필요하게 가져올 때 값비싼 리소스(예: 이미지)가 기본적으로 노출되는 경우는 이 규칙에서 예외입니다.
다음과 같은 전처리기 사용 간단히 (기본적으로 AEM에서 지원) 또는 SCSS (사용자 지정 빌드 시스템 필요) - CSS 정의를 지우고 다시 사용할 수 있도록 허용합니다.
선택기 가중치/특이성을 균일하게 유지합니다. 따라서 식별하기 어려운 CSS 캐스케이드 충돌을 피하고 해결하는 데 도움이 됩니다.
각 스타일을 개별 파일로 구성합니다.
@imports
또는 HTML 클라이언트 라이브러리 파일 포함 또는 사용자 지정 프론트엔드 에셋 빌드 시스템을 통해 원시 CSS가 필요한 경우.여러 가지 복잡한 스타일을 혼합하지 마십시오.
항상 CSS 클래스(BEM 표기법 준수)를 사용하여 CSS 규칙을 정의합니다.
스타일을 지정하지 마십시오. BLOCK--MODIFIER
응답형 격자에 첨부된 대로 직접 연결됩니다. 이 요소의 표시를 변경하면 응답형 격자의 렌더링 및 기능에 영향을 줄 수 있으므로 응답형 격자의 동작을 변경하려는 경우 이 수준에서 스타일링만 가능합니다.
다음을 사용하여 스타일 범위 적용 BLOCK--MODIFIER
. 다음 BLOCK__ELEMENT--MODIFIERS
구성 요소에서 사용할 수 있지만 그 이유는 BLOCK
는 구성 요소를 나타내며 구성 요소는 스타일이고, 스타일은 "정의"되고, 범위는 BLOCK--MODIFIER
.
예제 CSS 선택기 구조는 다음과 같아야 합니다.
첫 번째 수준 선택기 블록 - 수정자 |
두 번째 수준 선택기 차단 |
세 번째 수준 선택기 블록__요소 |
유효 CSS 선택기 | |
.cmp-list - 어둡게 | .cmp-list | .cmp-list__item | → | .cmp-list - 어둡게 .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 조작이 완료되면 표시합니다.