Как вы справляетесь с конкретными изменениями макетов модулей в SMACSS?

Question

Если у вас есть модуль, который требует незначительных изменений для каждого экземпляра, в зависимости от того, в какой части макета он находится, как вы справляетесь с этим с помощью SMACSS?

Насколько я понимаю, у меня есть два варианта, и ни один из них не кажется правильным.

1. Создать субмодуль / модификатор
   • Проблема, которую я вижу с этим, состоит в том, что этот подмодуль будет использоваться только один раз, и они начнут накапливаться по мере роста проекта.
2. Вложите класс модуля в класс макета
   • Проблемы: Увеличенная специфичность, немного загрязняет код, добавляя стилизацию модуля с классами макета или наоборот.

Большая часть информации, которую я нашел в SMACSS, основана на чрезмерно упрощенных ситуациях, поэтому она не так уж полезна, когда вы попадаете в реальный код.

---

Вот конкретный пример:

У меня есть модуль .nav и подкласс .nav-hor для горизонтально расположенной навигации. .nav-hor Нужно переключиться на навигационную кнопку переключения (открывается при нажатии кнопки), когда она становится слишком маленькой. Это контролируется медиа-запросами. Но проблема здесь в том, что правильная точка останова будет зависеть от размера его родительского контейнера. Таким образом, точка останова медиа-запроса, скорее всего, будет отличаться для каждого экземпляра.

.nav { /*...*/ }
.nav-hor { /*...*/ }
@media screen and (min-width: 30rem) { /* This dimension is variable according to the size of the parent container */
  .nav-hor {
    /* Convert to toggle nav */
  }
}

Answer 1

На моей практике лучший способ использовать подкласс в качестве модификатора.

На самом деле не имеет значения, насколько важны ваши изменения. Любые изменения должны применяться с тем же соглашением.

Использовать STATE не очень хорошая идея, так как это правило создано для текущего состояния модуля отражения, оно очень близко для манипулирования JS или установки некоторого начального состояния (скрытое, закрытое, расширенное, анимированное, ожидающее и т. Д.)

Использование потомков и потомков также не лучший способ, так как вы создаете тесно связанные deps с контекстом модуля. Есть также хороший трюк - вы можете обойтись без дочернего, вложенного и потомкового, заменив его подклассом - используйте подкласс.

Быстро о наименовании - nav-header может быть слишком особенным, вы можете попробовать заменить его на что-то более абстрактное, например, nav-horizontal, nav-inline, Вы можете комбинировать подклассы для достижения нужного результата и сохранять возможность повторного использования подклассов в другом контексте.

Так что в вашем случае подкласс является лучшим мнением