Когда лучше использовать примеси, а когда общие классы?

Question

[Pavel_20]

Всем доброго дня!
Давненько уже мучает такое сомнение. Пользуюсь препроцессорами и стараюсь не забывать про миксины. И тут собственно такая качеля возникает часто: общие стили можно передать с одной стороны классом (допустим .flex {display: flex; justify-content: space-between;), а с другой стороны миксином. Есть в чем-то отличие в плане производительности / целесообразности?

Answer 1

[Flying]

Общие CSS классы можно использовать если вы контролируете установку этих CSS классов, ведь это делается в HTML. Естественно в этом случае объём результирующего CSS кода будет меньше, но в сложных случаях логика расстановки CSS классов может быть не самой тривиальное.

В отличие от них mixin'ы влияют на генерируемый CSS. Кода в итоге скорее всего будет больше, но он будет более изолированным и менее будет зависеть от управления HTML. В плане производительности, если подходить с умом и не строить многоуровневые сложные селекторы без надобности - особых проблем быть не должно.

Также не стоит забывать о ещё одном способе горизонтального расширения - placeholder'ах. Их использование позволяет сэкономить на объёме CSS кода за счёт исключения дублирования, но может иметь не самые очевидные последствия без понимания того что именно стоит за этой абстракцией.

Comments

[Pavel_20]

немножко надо переварить (extend не использовал пока что никогда), спасибо за развернутый ответ