KARTEでは、サイトや他接客サービス等とのCSSの競合を避けるため、接客アクションごとにCSSのモジュール化・ローカル化を行なっています。
旧テンプレートの手法をLESS & Containerスタイル、現行のテンプレートの手法をSimple CSS-Modulesスタイルと呼んでおり、ここでは２つの手法の違いについて解説します。

CSSモジュール化スタイルの確認方法

接客サービスの編集画面で「表示設定」のタブ中の下部に、下記の画像のような表記がある場合LESS & Containerスタイルとなります。

null

なお、何も表示されていない場合はSimple CSS-Modulesスタイルとなります。

LESS & Container（旧仕様）

LESS & Containerスタイルで作られた接客アクションは現在、非推奨かつサポート対象外となっております。（ご利用いただく事自体は引き続き可能です。）

LESS & Containerスタイルでは、下記のような変換が行われて配信されます。

実装例

    .karte-temp-small-text {
        font-size: 80%;
    }

    .karte-temp-icon {
        background-image: url(icon.png);
    }

配信されるコード

    .karte-g .karte-temp-small-text{
        font-size: 80%;
    }

    .karte-g .karte-temp-icon {
        background-image: url(icon.png);
    }

これにより.karte-gというクラス下の要素にのみCSSが適応されるため、接客アクションのCSSが配信先のサイトに影響を及ぼすことはありません。

一方で、サイト内のCSSがKARTEの接客サービスに影響を与える可能性があるため、クラス名に手動でプリフィックスをつけてユニークな値にすることで対応してきました。
（例：.karte-temp-small-textや.karte-temp-iconなど）

この問題を解決するのが、次に説明するSimple CSS-Modulesスタイルです。

Simple CSS-Modules（新仕様）

Simple CSS-Modulesスタイルでは、CSSだけでなくHTMLのクラスにも自動でプリフィックスを付与し、サイト内のCSSとの競合を強力に防いでいます。

実装例

    <div class="wrapper">
        <i class="icon" aria-hidden="true"></i>
        text
    </div>
    .small-text {
        font-size: 80%;
    }

    .icon {
        background-image: url(icon.png);
    }

配信されるコード

    <div class="wrapper">
        <i class="_icon_o4ar1_" aria-hidden="true"></i>
        text
    </div>
    ._karte-g_o4ar1_ ._small-text_o4ar1_ {
        font-size: 80%;
    }

    ._karte-g_o4ar1_ ._icon_o4ar1_ {
        background-image: url(icon.png);
    }

CSSに定義されたクラス名、idは自動的にユニークな値に変換され、HTMLの側でもクラス名やidが同様のルールで変換されます。

上記例の_04ar1の部分は接客アクションごとに異なります。
なお、CSSに含まれていないクラスやidは変換されないので注意が必要です。

変換を行いたくない場合

［Simple CSS-Modulesスタイル限定］

以下のようにglobalで明示的に指定することで、変換させない事も可能です。

  • :global(.class-name) { ... }
  • :global(#id) { ... }

li a { ... }のように要素に直に指定する場合は変換は行われません。

実装例

    :global(.icon) {
        background-image: url(icon.png);
    }

配信されるコード

    ._karte-g_o4ar1_ .icon {
        background-image: url(icon.png);
    }

globalを指定した場合も.karte-gのスコープ内の制御になります。
HTMLの変換は行われないため、CSSの優先度を調整する事で接客サービスの外側から同じ要素にCSSを設定したりJavaScriptで要素を選択できるようになります。

JavaScriptで要素を選択したい場合

［Simple CSS-Modulesスタイル限定］

CSSに .wrapper { /*...*/ } と書くと、 HTML上のwapperクラスも変換されます。
そのため、Scriptでdocument.querySelector(".wrapper")と記述しても要素は選択できません。

変換テーブルであるstylesオブジェクトが定義済みの状態になっているので、下記のように利用して変換後のクラス名を取得して下さい。

    document.querySelector("."+styles["wrapper"])

より良い方法は<a class="js-karte-close">...</a>のように、要素のセレクタとしてCSSに記述しないクラスを利用することです。この場合はクラス名が変換されないので、stylesオブジェクトを参照する必要はありません。

composes機能

［Simple CSS-Modulesスタイル限定］

複数のクラスの設定を混ぜ合わせるために使用することができます。
機能としては、LESSのextends機能によく似ており、コードをコンパクトにすることが可能です。

    <div class="wrapper">
        <i class="icon" aria-hidden="true"></i>
        text
    </div>
    .small-text {
        font-size: 80%;
    }

    .icon {
        composes: small-text;
        background-image: url(icon.png);
    }

配信されるコード

    <div class="wrapper">
        <i class="_icon_o4ar1_ _small-text_o4ar1_" aria-hidden="true"></i>
        text
    </div>

.iconに、composes: small-textを追加することによって、
元のHTMLには記述していない、small-textクラスが配信HTMLに追加されています。