Добрый день!

Поясните, пожалуйста, общие рекомендации оформления блока кнопки.

Знакомясь с методологией немного запутался. В разделе "Быстрый старт" указано, что блок не должен влиять на свое окружение,

т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование.

Тут понятно. Но далее, в разделе "Внешняя геометрия и позиционирование", в примере оформления позиционирования блока button содержится правило, в котором задается border: 1px .

CSS-реализация кнопки:

.button {
    font-family: Arial, sans-serif;
    text-align: center;
    border: 1px solid black;    /* Рамка */
}
.header__button {
    margin: 30px;               /* Отступ */
    position: relative;
}

Насколько правильно согласно бэм методологии задавать границу кнопке на классе button? Нормальная ли это практика (как в примере выше) или все же более правильный подход для задания границы:

• использовать оформление кнопки на примере компонента button в bem-components (где визуальный эффект границы достигается наложение двух блоков)
• на классе button оформлять границу тенью:

.button { box-shadow:  0 0 0 1px black; }

• использовать элемент родительского блока:

.page__button { border: 1px solid black; }

• использовать модификатор:

.button_wiew_page { box-shadow: 0 0 0 1px black; }

И можно ли задавать блоку padding'и? С одной стороны - это внутреннее оформление блока, а с другой стороны они тоже влияют на размер.