Использование нескольких классов против @extend - PullRequest
Новая
       41

Использование нескольких классов против @extend

0 голосов
/ 28 мая 2018

РЕДАКТИРОВАТЬ:

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

Я немного использовал SASS с BEM, и я бы хотелзнать, в чем плюсы и минусы использования нескольких классов для модификаторов против @extend -ing соответствующего класса блока / элемента.Есть ли один, который обычно предпочитают другим?(учитывая, что я не буду включать классы в @media запросах [это даже важно?])

Пример нескольких классов: 

<div class="btn btn--admin btn--primary">

VS

Пример @extend -ing: 

.btn {
    // ...
}

.btn--admin {
    @extend .btn

    // ...
}

.btn--primary {
    @extend .btn

    // ...
}

1 Ответ

0 голосов
/ 28 мая 2018

Редактировать Сначала я не понял сути вопроса.После объяснения здесь идет мой ответ.

Результат тот же, но использование нескольких классов для модификаторов дает более детальный контроль при компиляции или редактировании без использования CSS (вы можете изменять свойства элемента без необходимостиповторно скомпилируйте код sass или отредактируйте ваш css).Также это обеспечит более подробное чтение HTML-кода.Прочитав btn btn-primary disabled, вы узнаете, что вам не нужно использовать инспектор для перехода к коду CSS, что у вас есть кнопка со стилем btn-primary и что кнопка disabled.Вы можете получить больше информации, чем об одном классе button, который расширяет остальные классы.Это более подходящий подход, если кто-то собирается использовать ваш код или работать над вашим проектом / веб-сайтом или создать, например, простую в использовании среду.

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

Первый подход приведет к уменьшению CSS и более подробному HTML.Второй вариант увеличит размер CSS при создании более «абстрактного» чтения кода.

Использование нескольких классов в большей степени зависит от области действия, чем расширение базового класса или даже незаполненного расширения (определяется как %myextend { ... }.

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

.base,
.parent .another,
.more-clases {
    // shared properties
}
@media (your-query) {
    .specific-query-class {
        //shared properties (repeated)
    }
}

В этом случае вы не сможете группироватьвсе определения ваших классов в одной области определения, как вы могли бы сделать, используя @extend: 

%my-extend {
    // shared properties
}

.base,
.parent .another,
.more-clases {
    @extend %my-extend;
}
@media (your-query) {
    .specific-query-class {
        @extend %my-extend;
    }
}

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

Определение расширения с помощью % вместо . позволит разделить блок свойств между различными уровнями вложенности и определениями медиа-запросов.Основное определение расширения не будет скомпилировано в css: блок определения будет скопирован во все расширенные правила.Использование . для определения выведет блок свойств почты в css и сгруппирует все расширенные классы вместе, но с этим типом расширения вы можете расширять различные медиазапросы.

Надеюсь, это поможет.

...