スタイルシステムのベストプラクティスについて understanding-style-organization-with-the-aem-style-system

AEM スタイルシステムには、2 つの主なフレーバーまたはスタイルが実装されています。

レイアウトスタイル ​は、コンポーネントの多くの要素に影響を与えて、コンポーネントの明確に定義され識別可能なレンディション（デザインとレイアウト）を作成し、多くの場合、再利用可能な特定のブランドの概念に合わせます。 例えば、ティーザーコンポーネントは、従来のカードベースのレイアウト、水平方向のプロモーションスタイル、または画像上のテキストをオーバーレイするヒーローレイアウトとして表示できます。

表示スタイル ​は、レイアウトスタイルのマイナーなバリエーションに影響を与えるために使用されますが、レイアウトスタイルの基本的な性質や意図は変更されません。 例えば、ヒーローレイアウトスタイルには、カラースキームをプライマリブランドのカラースキームからセカンダリブランドのカラースキームに変更する表示スタイルが含まれている場合があります。

スタイル組織のベストプラクティス style-organization-best-practices

AEM の作成者が使用できるスタイル名を定義する場合は、次の方法が最適です。

AEM の作成者が使用できる可能なスタイルの組み合わせの数が増えるにつれて、ブランド標準に対して QA および検証を行う必要がある組み合わせが増えます。また、オプションが多すぎると、目的の効果を生み出すために必要なオプションや組み合わせが不明になる可能性があり、作成者が混乱する場合があります。

スタイル名と CSS クラス style-names-vs-css-classes

スタイル名、または 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 の単一の実装と、スタイル名だけです。

ティーザーコンポーネントを使用したユースケース the-teaser-component-as-an-example-use-case

次に、ティーザーコンポーネントのスタイルをレイアウトと表示のスタイルが異なる複数のスタイルに設定するユースケースを示します。

これは、スタイル名（作成者に公開）の仕組みと、バッキング CSS クラスが編成される方法を探索します。

ティーザーコンポーネントのスタイルの設定 component-styles-configuration

次の画像は、ユースケースで説明したバリエーションのティーザーコンポーネントのスタイル設定を示しています。

スタイルグループの名前、レイアウト、表示は、この記事でスタイルの種類を概念的に分類するために使用される表示スタイルおよびレイアウトスタイルの一般的な概念と偶然一致します。

スタイルグループの名前とスタイルグループ数は、コンポーネントのユースケースとプロジェクト固有のコンポーネントのスタイリング規則に合わせて調整する必要があります。

例えば、ディスプレイ ​スタイルグループ名は、カラー ​という名前にすることもできます。

スタイル選択メニュー style-selection-menu

下の画像は、スタイルメニューの作成者が操作して、コンポーネントに適切なスタイルを選択する様子を示しています。スタイルグループ名とスタイル名はすべて作成者に公開されることに注意してください。

デフォルトスタイル default-style

デフォルトスタイルは、多くの場合、コンポーネントで最も一般的に使用されるスタイルで、ティーザーがページに追加したときの、スタイルが設定されていないデフォルトの表示です。

デフォルトスタイルの一般性に応じて、CSS は .cmp-teaser（修飾子なし）または .cmp-teaser--default に直接適用できます。

デフォルトのスタイルルールがすべてのバリエーションに適用される頻度が多い場合は、.cmp-teaser をデフォルトスタイルの CSS クラスとして使用することをお勧めします。これは、BEM のような規則に従っていると仮定すると、すべてのバリエーションがそれらを暗黙的に継承する必要があるためです。そうでない場合は、.cmp-teaser--default などのデフォルト修飾子を介して適用して、これをコンポーネントのスタイル設定のデフォルト CSS クラスフィールドに追加する必要があります。そうしないと、これらのスタイルルールが各バリエーションでオーバーライドされます。

「名前付き」スタイルをデフォルトスタイルとして割り当てることも可能です。その例は、以下で定義されているヒーロースタイル (.cmp-teaser--hero) です。ただし、.cmp-teaser または .cmp-teaser--default CSS クラスの実装に対してデフォルトスタイルを実装する方が明確です。

プロモスタイル promo-style

プロモレイアウトスタイル ​は、価値の高いコンテンツをサイトで宣伝するために使用され、web ページ上の帯状の領域を占めるために水平にレイアウトされます。また、ブランドカラーでスタイル設定できる必要があります。デフォルトのプロモレイアウトスタイルでは黒いテキストを使用します。

これを達成するために、プロモ ​の​ レイアウトスタイル、および​ グリーン ​と​ イエロー ​の​ 表示スタイル ​を、AEM スタイルシステムでティーザーコンポーネントに設定します。

プロモのデフォルト

プロモプライマリ

プロモセカンダリ

プロモ右揃えスタイル promo-r-align

プロモ右揃え ​レイアウトスタイルはプロモーションスタイルのバリエーションで、画像とテキストの場所（画像は右、テキストは左）を反転させるものです。

右揃えは、根本的には表示スタイルであり、プロモーションレイアウトスタイルと組み合わせて選択された表示スタイルとして AEM スタイルシステムに入力できます。これは、次のベストプラクティスに違反します。

効果のある、スタイルの組み合わせのみを表示する

…これは既にデフォルトスタイルで違反しています。

右揃えはプロモレイアウトスタイルにのみ影響し、他の 2 つのレイアウトスタイル（デフォルトおよびヒーロー）には影響しないので、プロモレイアウトスタイルのコンテンツを右揃えにする CSS クラスを含んだ新しいレイアウトスタイル「プロモ（右揃え）」を次のように作成できますcmp -teaser--alternate。

このように複数のスタイルを 1 つのスタイルエントリに組み合わせると、使用可能なスタイルとスタイルの並べ替えの数を減らすこともでき、数を最小限に抑えるうえで最適です。

CSS クラスの名前 cmp-teaser--alternate は、「右揃え」という作成者にわかりやすい命名法と一致しなくてもかまいません。

プロモ右揃えのデフォルト

プロモ右揃えプライマリ

プロモ右揃えのセカンダリ

ヒーロースタイル hero-style

ヒーローレイアウトスタイルでは、コンポーネントの画像を背景として、タイトルとリンクがオーバーレイ表示されます。 ヒーローレイアウトスタイルは、プロモレイアウトスタイルと同様に、ブランドカラーを使用してカラーリングできる必要があります。

ヒーローレイアウトスタイルにブランドカラーを適用するには、プロモレイアウトスタイルと同じ表示スタイルを利用できます。

コンポーネントごとに、スタイル名が単一の 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;
   ...
}

ヒーローのデフォルト

ヒーロープライマリ

ヒーローセカンダリ

その他のリソース additional-resources