> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Пользовательский CSS

> Добавьте пользовательский CSS для тонкой настройки Aftersell Cart сверх встроенных настроек дизайна.

Когда встроенных [настроек дизайна](/ru/aftersell/cart/design-settings) недостаточно, добавьте собственный **пользовательский CSS** для оформления корзины.

<div id="where-to-add-it">
  ## Куда его добавить
</div>

В редакторе корзины откройте **Cart settings → Custom CSS**. Ваш CSS **применяется ко всей корзине** и загружается **после** базовых стилей корзины, поэтому ваши правила имеют приоритет.

<div id="target-public-classes-only">
  ## Используйте только публичные классы
</div>

Оформляйте корзину, используя её **публичные классы `cart-external-*`**. Редактор подсказывает их через автодополнение и предостерегает от остальных:

* **`cart-external-*`**: публичная поддерживаемая цель. Используйте их. Они не несут собственных стилей и существуют исключительно для того, чтобы к ним подключался ваш CSS.
* **`cart-internal-*`**: внутренняя механика корзины, где живут все её встроенные стили. Редактор помечает селекторы по ним как ошибки. Они не меняются легкомысленно, поскольку от них зависит каждая существующая корзина, но право менять их принадлежит корзине, а не является контрактом с вами. Вместо этого оформляйте через парный класс `cart-external-*`.
* Другие классы `cart-*`, которые редактор не распознаёт, помечаются как предупреждения.

<Note>
  Вы увидите классы `cart-internal-*` в разметке, включая [пользовательский шаблон](/ru/aftersell/cart/custom-templates) по умолчанию каждого блока. Это ожидаемо: именно они придают блоку его встроенный вид. Правило здесь касается **селекторов, которые вы пишете** в этой панели, а не имён классов, которые отображает корзина.

  Если вы пишете пользовательский шаблон, изменяющий DOM-структуру блока, см. [Оформление пользовательского шаблона](/ru/aftersell/cart/custom-templates#styling-a-custom-template), чтобы узнать, какие имена классов оставить, а какие убрать.
</Note>

<div id="shadow-dom-the-cart-is-self-contained">
  ## Shadow DOM: корзина автономна
</div>

На витрине вся корзина отображается внутри собственного **shadow DOM**. Это значит:

* CSS вашей темы не может проникнуть в корзину, а CSS корзины не может выйти наружу, поэтому ваш пользовательский CSS автоматически ограничен корзиной и не будет конфликтовать с остальным сайтом.
* Ваши селекторы должны ссылаться на элементы и классы **внутри корзины**. Селекторы, нацеленные на элементы страницы вне корзины, внутрь не доберутся.

Та же граница действует для JavaScript: `document.querySelector` тоже не видит внутрь выдвижной корзины. Скрипт, обращающийся к элементу корзины, должен идти через [`shadowRoot`](/ru/aftersell/cart/sdk-overview#shadowroot) и нацеливаться на те же классы `cart-external-*`.

<div id="when-to-use-design-settings-instead">
  ## Когда лучше использовать настройки дизайна
</div>

Для цветов, скруглений, отступов и ширины встроенные [настройки дизайна](/ru/aftersell/cart/design-settings) проще и безопаснее, поэтому прибегайте к пользовательскому CSS только для того, что они не охватывают.

<div id="where-to-go-next">
  ## Что дальше
</div>

* **[Настройки дизайна](/ru/aftersell/cart/design-settings)**: встроенные элементы управления оформлением — первое, что стоит попробовать.
* **[Пользовательские шаблоны](/ru/aftersell/cart/custom-templates)**: полная замена разметки блока, когда одного CSS недостаточно.
* **[Cart SDK](/ru/aftersell/cart/sdk-overview)**: для поведения, а не внешнего вида.