Важно то, сколько передается данных и как часто это происходит.
<div class="some-block grid__col grid__col--span-3 grid__col--offset-3"><div class="some-block grid__col-3 grid__offset-3">
Ну на знаю... Как-то очень попахивают забористыми костылями. Хотя согласен, что менюха доступа к компонентам удобнее, чем к цветовым стилям.
Там есть маленькая проблемка - "Select All with Same Fill" выделяет только обычные элементы с тем же цветом, но не внутри компонентов. Хотя опять же, возможно, я недоразобрался.
Нет, я так не делаю. Хотя на самых первых порах были и такие идеи, быстро пришел к выводу, что постоянно щелкать глазиком на слоях неудобно. Гораздо удобнее инстанс сменить, поэтому состояния кнопки (hover/disabled/итд) - это разные компоненты. Хотя изредка бывают исключения.
Думаю, такой подход прокатит для элементарных компонентов. Но не очень представляю, как это провернуть для составных. Например у меня есть компонент "карточка" с суб-компонентом "аватарка" - и вот инстансы этих аватарок часто разные у разных инстансов карточек.
Это да, тоже стараюсь придерживаться такого правила, хоть и не всегда получается. Но надо.
Никогда не используйте в макете мастер-компонент, только его инстансы.
Вот кстати да, имя фрейма тоже добавляется в имя!
Как найти баланс между структурой и удобством на практике - это вопрос.
Об этом я как-то не думал. Хотя компоненты экспортировал. Буду иметь в виду.