В #1335 мы попробовали сделать весь CSS модульным и огребли.

.Child.Child--ios {
  color: red;
}

.Parent .Child {
  color: blue;
}

Модульный CSS — хорошо, потому что:

1. Уменьшает размер CSS-бандла небольших приложений и ускоряет загрузку
2. Устойчивее к рефакторингам — все стили компонента в одном месте
3. Поддерживает инструменты экосистемы css-модулей

Так что попробуем еще раз, но будем действовать аккуратнее:

1. [done] Поддержать импорты CSS из TS (Собирать CSS вебпаком #1628)
2. [in review] Настроить линтеры для модульных стилей (refactor: Выделить модульный CSS и добавить линтеры #1639)
3. Добавить в dist экспериментальную сборку с модульным CSS, чтобы
4. Плавно и безопасно делать стили компонентов модульными
5. Убрать лишние линтеры
6. В v5+ сделать сборку с модульным CSS дефолтной

После #1639 запускаем марафон модульных стилей:

• ActionSheet
• ActionSheetItem
• Alert
• AppRoot
• Avatar
• Badge
• Banner
• Button
• Card
• CardGrid
• CardScroll
• Cell
• CellButton
• Checkbox
• Chip
• ChipsInput
• ChipsSelect
• ContentCard
• Counter
• CustomScrollView
• CustomSelect
• CustomSelectOption
• DatePicker
• Div
• Epic
• File
• FixedLayout
• Footer
• FormField
• FormItem
• FormLayout
• FormLayoutGroup
• FormStatus
• Gallery
• Gradient
• Group
• Header
• HorizontalCell
• HorizontalScroll
• IconButton
• InfoRow
• Input
• Link
• List
• MiniInfoCell
• ModalCard
• ModalDismissButton
• ModalPage
• ModalPageHeader
• ModalRoot
• NativeSelect
• Panel
• PanelHeader
• PanelHeaderBack
• PanelHeaderButton
• PanelHeaderClose
• PanelHeaderContent
• PanelHeaderContext
• PanelHeaderEdit
• PanelHeaderSubmit
• Placeholder
• PopoutRoot
• PopoutWrapper
• Progress
• PromoBanner
• PullToRefresh
• Radio
• RangeSlider
• Removable
• RichCell
• Root
• ScreenSpinner
• Search
• Select
• SelectMimicry
• Separator
• SimpleCell
• Slider
• SliderSwitch
• Snackbar
• Spacing
• Spinner
• SplitCol
• SplitLayout
• SubnavigationBar
• SubnavigationButton
• Switch
• Tabbar
• TabbarItem
• Tabs
• TabsItem
• Tappable
• Textarea
• Tooltip
• Typography/Caption
• Typography/Headline
• Typography/Subhead
• Typography/Text
• Typography/Title
• UsersStack
• View
• WriteBar
• WriteBarIcon

Правила простые: Component.css — модульный и может импортироваться независимо, если:

1. Работает только с селекторами .Component
2. Другие CSS не лезут в .Component
3. Component не импортируется из не-модульных компонентов

План:

1. Выбираем подходящий Component из списка (из-за 1.3. стоит начать с компонентов, которые не используются другими компонентами VKUI — см. схему зависимостей)
2. Переименовываем Component.css в Component.m.css
3. Проверяем компоненты в isModular из tasks/modular-components, и перещелкиваем true, если они импортируют Component
4. Запускаем линтеры без кеша: rm -rf .cache && yarn test:static
5. Как-то чиним модульность
   6. Локализация селектора
   7. Рефакторинг, при котором оверрайды не нужны
   8. Перенос стилей из контейнера в целевой компонент (не модульно, нужна донастройка линтера)
   9. Форсирование порядка импортов
   9. С изменением дизайна

Пожелаем нам удачи; победа не за горами.