Какие плюсы и минусы scoped

А, ну вот, опять про эти ваши scoped стили, блядь! Ну что, разбираем, что за зверь такой, этот scoped?

С одной стороны, штука, конечно, охуенная. Представь: пишешь ты стили в компоненте, и они там, как в банке с огурцами — никуда не вылезают, ни с чем не конфликтуют. Никаких этих block__element--modifier, блядь, на три строчки. Написал .button и спокоен, что он не наебнёт какую-нибудь другую кнопку на другом конце приложения. Красота, ёпта!

Плюсы, блядь, очевидные:

• Стили в клетке, сука. Сидят в своём компоненте и не шарятся по всему проекту, как последние распиздяи.
• Поддерживать — одно удовольствие. Всё в одном файлике: разметка, логика, стили. Не надо прыгать по папкам, ища, какой же пидарас написал color: pink для всех дивов.
• Имена классов можно давать самые тупые, типа .header или .list. Потому что они автоматом станут уникальными. Никакого БЭМа, ёбаный в рот!
• Для компонентного подхода — просто идеально, как хуй в тапочке.

Но, как водится, не всё так гладко, блядь. Есть и подводные, сука, грабли.

Минусы, на которые можно наступить:

• Захотел ты переопределить стиль извне, глобально — а нихуя! Он же изолирован, как чеченский боевик в бункере. Придётся изгаляться.
• Раньше были костыли типа /deep/ или >>>, чтобы пролезть в дочерние компоненты. Так их сейчас почти везде выпилили, эти заплатки. Пиздец, а не решение.
• Размер итогового CSS-файла может вырасти, потому что на каждый элемент навесят по уникальному атрибуту. Не критично, но приятного мало.
• Стилизовать внутренности чужих (дочерних) компонентов — та ещё песня. Нужно явно разрешать, а если компонент не твой — вообще пизда.

Ну и примерчик, чтобы не быть голословным, как хуй без яиц:

<style scoped>
.button {
  color: red;
}
</style>

Вот этот .button станет красным только внутри этого компонента. А в Реакте, чтобы так же изолироваться, придётся юзать CSS Modules или эти ваши styled-components. В общем, везде свои приколы, блядь.