Соглашения об именах для адаптивных переменных в SuitCSS

Недавно я начал использовать соглашения об именах suitCSS в своем Sass (не используя настройку PostCSS по умолчанию), и не ясно, как правильно называть переменные:

Переменные, используемые внутри медиа-запросов компонента. В официальных документах я видел только ссылку на использование отзывчивые утилиты, но никаких соглашений для адаптивных переменных. Для примера возьмем этот код:

.MyComponent {
    margin-left: $MyComponent-marginLeft;

    @include media('sm') {
        margin-left: $sm-MyComponent-marginLeft;
    }
}

Какое имя переменной следует использовать? $u-sm-MyComponent-marginLeft или $sm-MyComponent-marginLeft и почему?

И другой вопрос касается вложенных переменных и/или внутри псевдоклассов.

.Nav-listItem {
    &:last-child {
        .Nav-link {
            margin-right: $Nav-listItem-onLastChild-NavLink-marginRight;
        }
    }
}

css sass naming-conventions bem suit-css
person MorrisWatson    schedule 12.09.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Отказ от ответственности: ответ, основанный на мнении

Как вы сказали, для вашего конкретного случая документация не совсем ясна. Таким образом, вы можете выбрать, как вы их назовете. Важно, чтобы вы были последовательны в своем именовании и чтобы другие разработчики четко понимали, каковы соглашения.

Адаптивные переменные

Для именования адаптивных переменных я бы выбрал следующее соглашение

$BaconComponent-marginLeft-sm
$BaconComponent-marginLeft-md
$BaconComponent-marginLeft-lg

Почему?

Для меня это логично, sm, md, lg являются подмножеством marginLeft и поэтому должны продолжаться marginLeft. Когда сгруппированы вместе, как указано выше, их легко сканировать, поскольку отличаются последние символы переменной.

Похожий пример можно увидеть здесь.

Вложенные переменные

Из документов:

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

Ваше наименование здесь слишком явно отражает внутреннюю структуру компонента. Я бы предложил что-то вроде

$Nav-listItem-lastItem-marginRight

Я думаю, что это лучше описывает использование переменной.

person Colin Bacon    schedule 17.12.2019