Templates mit Container Queries funktional machen

Ich möchte einige Komponentenvorlagen überarbeiten, um Containerabfragen besser zu unterstützen. Und ich muss einige zusätzliche Wrapper hinzufügen, da ich einen Container nicht gegen sich selbst abfragen konnte. Aber wenn ich das tue, frage ich mich, wie ich die umgebenden Elemente am besten benenne. Wenn ich mir meine Vorlagen ansehe, ist mein üblicher Name ein wrapper-Element als äußeres und ein container als inneres Element.

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

Das schien viel Sinn zu ergeben. Aber für die Containerabfragen müsste ich immer das äußere Element als Container deklarieren. Und es wird nicht ganz so intuitiv sein, wenn die Wrapper als Container deklariert werden. Das sieht einfach viel besser aus:

image

Daher frage ich mich, ob sich jemand bereits Gedanken über eine Konvention oder einen guten Ansatz gemacht hat? Vielleicht mache ich mir zu viele Gedanken :thinking:, aber es ist eine Breaking Change, wenn ich Vorlagen überarbeite, daher möchte ich nicht einfach aus der Hüfte schießen.

1 „Gefällt mir“