Используете ли вы scoped стили при использовании vue?

Question

[ivan0512]

Лично я всегда помечал стили scoped и никогда не испытывал с этим проблем.
Однако, за последнее время несколько раз столкнулся с тем, что кто-то от этого сознательно отказывается и, допустим, прибегает к помощи БЭМ или чего-то другого.
Какие есть минусы при использовании scoped стилей?

Comments

[WapSter]

Ну из того, что сразу приходит в голову, не возможность реиспользовать.

[Михаил]

scoped как раз таки замена этому бэму

[ivan0512]

WapSter, Так можно переиспользовать компоненты, в которых стили уже написаны

Answer 1

[KindredSpirit]

Прежде всего - слабая инкапсуляция. Точнее, ее почти нет. scoped-стили инжектят в целевой DOM-элемент атрибут с хэшем, что никак не защищает от внешних классов с тем же названием.
То есть, если у вас scoped-класс example с color: red, на выходе будет что-то вроде:

.example[data-v-hsfg3e3] {
  color: red;
}

И если в другом компоненте без скоупов или в глобальных стилях есть класс example с background-color: red, у вас проблемы.

В целом, не вижу причин использовать scoped при наличии из коробки css-модулей, в которых этих недостатков нет.

Comments

[ivan0512]

Лично я всегда использовал scoped во всех компонентах + немногочисленные глобальные стили (ресет стилей) и вроде как с проблемами не сталкивался.
Правильно ли я понимаю, что css модули работают не добавляя дата аттрибут в селектору, а модифицируя название самого класса? Согласен, это будет надежнее.
Из минусов модулей, то что нужно иметь еще ряд css файлов, хотя многим это понравится. А еще в новой вью 3 можно будет из стилей обращаться к переменным, чтобы стили были реактивными, это уже очень крутая фича)

[KindredSpirit]

ivan0512, с проблемами можно и не столкнуться, если разработчиков 2-3, либо помимо скоупов есть соглашения по неймингу типа того же БЭМа. Но при компонентном подходе, например, часто используются классы вроде container, wrapper, которые могут быть определены и глобально, а если к проекту подключен какой-нибудь Bootstrap, становится еще веселее.
Да, css-модули меняют название класса, добавляя к нему случайно сгенеренный хэш (длину можно менять в настройках). А вот в отдельные файлы их добавлять не надо, в single file components они используются так же, как scoped стили.
Единственный минус, с которым реально сталкивался - неудобный синтаксис - из компонента к таким классам нужно обращаться через this.$style как к обычным свойствам объекта + названия классов приходится писать в camel case, иначе становится неудобно к ним обращаться.

[ivan0512]

KindredSpirit, Спасибо, почитаю про них побольше