мне кажется, это плохо увеличением веса селектора

Можно предотвратить выстрел при помощи комментария /*button*/.button.

Думаю, селектор tag.class можно иногда использовать как модификатор блока .class, но писать так всегда — усложнять поддержку в дальнейшем, если вдруг потребуется применить этот блок с другим тегом, например.

Я не поняла про комментарий. Можно подробней — как это работает?

Договорились, что если блок должен быть реализован только определённым тегом, то писать его в таком комментарии. То есть, просто на уровне стиля кодирования.

А, ну то есть "читай документацию". Понятно.

@varya Ты же знаешь, что чтобы не писать странного в CSS и не заставлять пользователей читать документацию, нужны шаблоны на блоки. Хак с button.button никак не поможет стрелку с <h2 class=”button”>.

А потом у тебя появится input.button, span.button и a.button. И тебе придётся все селекторы повторить четыре раза четыре раза четыре раза четыре раза.

Я не вижу ничего страшного в .button если его поведение не зависит от поведения html элемента, которого он должен расширять. Объясню, что я имею в виду:

Если спустится до абстракции компонент, то используя BEM мы вводим второй слой компонент (bem-компонент), добавляя его к слою html-компонент.

Единственный косяк в том, что мы фактически замиксовываем наш кастомный bem-компонент с html-компонентом, прописывая bem-класс. При этом смешивается и поведение и представление. И если представление можно как-то отрезетить, то с поведением по умолчанию все хуже. Потому как некоторые bem-компоненты могут жестко зависеть от html-компонент, например блок b-input.

Вводя простой селектор по классу .b-input мы заявляем, что приписав этот к класс к любому html элементу мы гарантируем его поведение, т.к. мы не зависим от html-поведения/представления по умолчанию.

Но, чаще так не бывает и bem-компонент b-input жестко зависит от поведения html-компонента input (каретка, ввод текста, события, ...) поэтому эта зависимость просто обязана быть прописана в селекторе: input.b-input. Тем самым мы утверждаем, что наш блок имеет зависимость от поведения/представления html-компонента input.

В случае с кнопкой button, думаю, тут больше вопрос представления и селектора .button достаточно.

@azproduction Но тогда все переопределяющие должны и модификаторы писать input.b-input_mod, иначе переопределение не сработает. Это приемлимо?

@varya да, иначе никак не задекларировать зависимости. Благо в SASS/LESS это сделать очень просто :)

@azproduction вообще-то я видел вполне легитимные span.b-input. Как read-only версию которой нужно только визуальное представление.

@alexeyten почему бы и нет если read-only.

Ну так зачем ты тогда пишешь, что "эта зависимость просто обязана быть прописана в селекторе: input.b-input"?