Использование фреймворка CSS с семантической разметкой

Я надеюсь, что существует какая-то структура CSS / стиля, которая работает со строго семантической разметкой и приводит к относительно небольшим файлам. Как я вижу сейчас, это еще один пример железного треугольника «три варианта, выберите два».

Вот что я имею в виду. Я ищу:

1. Какой-то фреймворк визуального стиля (чтобы мне не приходилось писать все вручную)

2. ... который работает с простым семантическим HTML без какого-либо загрязнения имен классов только ради визуального стиля. Это мое тупое, упрямое мнение, но я считаю, что разметка всегда должна быть разреженной, простой и семантической. Такие вещи:

   <div class = "widget">
   

   ... а не это:

   <div class = "widget d-flex p-2 bd-highlight">
   

3. ... что приводит к относительно небольшому размеру файла (-ов). Сами по себе фреймворки на самом деле довольно скудные. Но чтобы оставаться легкими, им требуется декларативная разметка. Препроцессоры, такие как Sass, действительно очень легко позволяют выполнять наследовать наборы правил прямо из фреймворков. Итак, вы можете сделать это:

   .widget {
       @extend .d-flex;
       @extend .p-2;
       @extend .bd-highlight;
   }
   

   Но это очень быстро приводит к размеру файла абсолютно колоссальный. Наборы правил остаются крошечными, но списки селекторов взрываются. Я бы категорически отверг это решение только из-за проблемы с размером файла.

Моя интуиция подсказывает мне, что у меня есть варианты: либо продолжить писать CSS вручную (отбрасывая №1), либо начать объявлять стили в моем html (отбрасывая №2).

Кто-нибудь знает выход из этого? Я неправильно использую Sass? Есть ли другой тип фреймворка, о котором я не знаю? Я работаю с Sass и React, но я готов учиться чему угодно.