スタイルシステムでコーディングする方法についての内容を確認して、AEM スタイルシステムで使用される BEM のような規則を理解してください。
AEM スタイルシステムには、2 つの主なフレーバーまたはスタイルが実装されています。
レイアウトスタイルは、コンポーネントの多くの要素に影響を与えて、コンポーネントの明確に定義され識別可能なレンディション(デザインとレイアウト)を作成し、多くの場合、再利用可能な特定のブランドの概念に合わせます。 例えば、ティーザーコンポーネントは、従来のカードベースのレイアウト、水平方向のプロモーションスタイル、または画像上のテキストをオーバーレイするヒーローレイアウトとして表示できます。
表示スタイルは、レイアウトスタイルのマイナーなバリエーションに影響を与えるために使用されますが、レイアウトスタイルの基本的な性質や意図は変更されません。 例えば、ヒーローレイアウトスタイルには、カラースキームをプライマリブランドのカラースキームからセカンダリブランドのカラースキームに変更する表示スタイルが含まれている場合があります。
AEM の作成者が使用できるスタイル名を定義する場合は、次の方法が最適です。
AEM の作成者が使用できる可能なスタイルの組み合わせの数が増えるにつれて、ブランド標準に対して QA および検証を行う必要がある組み合わせが増えます。また、オプションが多すぎると、目的の効果を生み出すために必要なオプションや組み合わせが不明になる可能性があり、作成者が混乱する場合があります。
スタイル名、または AEM 作成者に提示されるオプションと実装する CSS クラス名は、AEM で分離されています。
これにより、AEM の作成者は明確で理解できる語彙でスタイルオプションにラベルを付けることができますが、CSS デベロッパーは、将来にわたって有効な、セマンティックな方式で CSS クラスに名前を付けることができます。 次に例を示します。
コンポーネントには、ブランドのプライマリカラーおよびセカンダリカラーで色付けするオプションが必要ですが、AEM の作成者は、カラーをプライマリとセカンダリのデザイン言語ではなく、グリーンやイエローとして知っています。
AEM スタイルシステムでは、作成者は、グリーンおよびイエローという使いやすいラベルを使用してカラー表示スタイルを公開できる一方、CSS デベロッパーは .cmp-component--primary-color
および .cmp-component--secondary-color
のセマンティックなネーミングを使用して、CSS で実際のスタイルの実装を定義できます。
スタイル名グリーンは .cmp-component--primary-color
に、イエローは .cmp-component--secondary-color
にマッピングされます。
今後、会社のブランド カラーが変更された場合、変更する必要があるのは、.cmp-component--primary-color
と .cmp-component--secondary-color
の単一の実装と、スタイル名だけです。
次に、ティーザーコンポーネントのスタイルをレイアウトと表示のスタイルが異なる複数のスタイルに設定するユースケースを示します。
これは、スタイル名(作成者に公開)の仕組みと、バッキング CSS クラスが編成される方法を探索します。
次の画像は、ユースケースで説明したバリエーションのティーザーコンポーネントのスタイル設定を示しています。
スタイルグループの名前、レイアウト、表示は、この記事でスタイルの種類を概念的に分類するために使用される表示スタイルおよびレイアウトスタイルの一般的な概念と偶然一致します。
スタイルグループの名前とスタイルグループ数は、コンポーネントのユースケースとプロジェクト固有のコンポーネントのスタイリング規則に合わせて調整する必要があります。
例えば、ディスプレイスタイルグループ名は、カラーという名前にすることもできます。
下の画像は、スタイルメニューの作成者が操作して、コンポーネントに適切なスタイルを選択する様子を示しています。スタイルグループ名とスタイル名はすべて作成者に公開されることに注意してください。
デフォルトスタイルは、多くの場合、コンポーネントで最も一般的に使用されるスタイルで、ティーザーがページに追加したときの、スタイルが設定されていないデフォルトの表示です。
デフォルトスタイルの一般性に応じて、CSS は .cmp-teaser
(修飾子なし)または .cmp-teaser--default
に直接適用できます。
デフォルトのスタイルルールがすべてのバリエーションに適用される頻度が多い場合は、.cmp-teaser
をデフォルトスタイルの CSS クラスとして使用することをお勧めします。これは、BEM のような規則に従っていると仮定すると、すべてのバリエーションがそれらを暗黙的に継承する必要があるためです。そうでない場合は、.cmp-teaser--default
などのデフォルト修飾子を介して適用して、これをコンポーネントのスタイル設定のデフォルト CSS クラスフィールドに追加する必要があります。そうしないと、これらのスタイルルールが各バリエーションでオーバーライドされます。
「名前付き」スタイルをデフォルトスタイルとして割り当てることも可能です。その例は、以下で定義されているヒーロースタイル (.cmp-teaser--hero)
です。ただし、.cmp-teaser
または .cmp-teaser--default
CSS クラスの実装に対してデフォルトスタイルを実装する方が明確です。
デフォルトのレイアウトスタイルには表示スタイル名はありませんが、作成者は AEM スタイルシステムの選択ツールで「表示」オプションを選択できます。
これは、ベストプラクティスに違反しています。
効果のある、スタイルの組み合わせのみを表示する
作成者がグリーンの表示スタイルを選択しても、何も起こりません。
他のすべてのレイアウトスタイルはブランドカラーを使用して色を付ける必要があるので、このユースケースでは、この違反を認めます。
以下のプロモ(右揃え)の節では、スタイルの不要な組み合わせを防ぐ方法について説明します。
.cmp-teaser--promo
または .cmp-teaser--default
プロモレイアウトスタイルは、価値の高いコンテンツをサイトで宣伝するために使用され、web ページ上の帯状の領域を占めるために水平にレイアウトされます。また、ブランドカラーでスタイル設定できる必要があります。デフォルトのプロモレイアウトスタイルでは黒いテキストを使用します。
これを達成するために、プロモのレイアウトスタイル、およびグリーンとイエローの表示スタイルを、AEM スタイルシステムでティーザーコンポーネントに設定します。
cmp-teaser--promo
.cmp-teaser--promo
cmp-teaser--promo
cmp-teaser--primary-color
cmp-teaser--promo.cmp-teaser--primary-color
cmp-teaser--promo
cmp-teaser--secondary-color
cmp-teaser--promo.cmp-teaser--secondary-color
プロモ右揃えレイアウトスタイルはプロモーションスタイルのバリエーションで、画像とテキストの場所(画像は右、テキストは左)を反転させるものです。
右揃えは、根本的には表示スタイルであり、プロモーションレイアウトスタイルと組み合わせて選択された表示スタイルとして AEM スタイルシステムに入力できます。これは、次のベストプラクティスに違反します。
効果のある、スタイルの組み合わせのみを表示する
…これは既にデフォルトスタイルで違反しています。
右揃えはプロモレイアウトスタイルにのみ影響し、他の 2 つのレイアウトスタイル(デフォルトおよびヒーロー)には影響しないので、プロモレイアウトスタイルのコンテンツを右揃えにする CSS クラスを含んだ新しいレイアウトスタイル「プロモ(右揃え)」を次のように作成できますcmp -teaser--alternate
。
このように複数のスタイルを 1 つのスタイルエントリに組み合わせると、使用可能なスタイルとスタイルの並べ替えの数を減らすこともでき、数を最小限に抑えるうえで最適です。
CSS クラスの名前 cmp-teaser--alternate
は、「右揃え」という作成者にわかりやすい命名法と一致しなくてもかまいません。
cmp-teaser--promo cmp-teaser--alternate
.cmp-teaser--promo.cmp-teaser--alternate
cmp-teaser--promo cmp-teaser--alternate
cmp-teaser--primary-color
.cmp-teaser--promo.cmp-teaser--alternate.cmp-teaser--primary-color
cmp-teaser--promo cmp-teaser--alternate
cmp-teaser--secondary-color
.cmp-teaser--promo.cmp-teaser--alternate.cmp-teaser--secondary-color
ヒーローレイアウトスタイルでは、コンポーネントの画像を背景として、タイトルとリンクがオーバーレイ表示されます。 ヒーローレイアウトスタイルは、プロモレイアウトスタイルと同様に、ブランドカラーを使用してカラーリングできる必要があります。
ヒーローレイアウトスタイルにブランドカラーを適用するには、プロモレイアウトスタイルと同じ表示スタイルを利用できます。
コンポーネントごとに、スタイル名が単一の CSS クラスのセットにマッピングされます。つまり、プロモレイアウトスタイルの背景に色を付ける CSS クラス名は、レイアウトスタイルのテキストとリンクに色を付ける必要があります。
これは CSS ルールのスコープを設定することで簡単に実現できますが、CSS デベロッパーはこれらの順列が AEM でどのように制定されるかを理解する必要があります。
プロモレイアウトスタイルの背景を原色(グリーン)で色付けするための CSS:
.cmp-teaser--promo.cmp-teaser--primary--color {
...
background-color: green;
...
}
ヒーローレイアウトスタイルのテキストを原色 (グリーン)で色付けするための CSS:
.cmp-teaser--hero.cmp-teaser--primary--color {
...
color: green;
...
}
cmp-teaser--hero
.cmp-teaser--hero
cmp-teaser--hero
cmp-teaser--primary-color
cmp-teaser--hero.cmp-teaser--primary-color
cmp-teaser--hero
cmp-teaser--secondary-color
cmp-teaser--hero.cmp-teaser--secondary-color