Как заставить шаблоны работать с контейнерными запросами

Внести вклад UX
1

Я хочу рефакторинг некоторых шаблонов компонентов, чтобы лучше поддерживать контейнерные запросы. Мне также нужно будет добавить дополнительные обертки, так как я не могу делать запрос к контейнеру относительно самого себя. Но если я это сделаю, я задумываюсь, как лучше назвать эти обёртывающие элементы. Глядя на мои шаблоны, моё обычное именование предусматривает элемент wrapper как внешний и container как внутренний.

.component {
  &__wrapper {
  }
  &__container {
  }
}

Это казалось логичным. Но для контейнерных запросов мне всегда придётся объявлять внешний элемент как контейнер. И будет не совсем интуитивно, если обёртки будут объявлены как контейнеры. Это выглядит гораздо лучше:

image

Так что я думаю, думал ли кто-то уже о конвенции или хорошем подходе здесь? Возможно, я слишком усложняю :thinking:, но это изменит API, если я рефакторю шаблоны, поэтому я не хотел бы действовать наобум..

1 лайк