Вы не сможете отвязать код от структуры html, потому что они пишется под ваш документ. каким бы вы не хотели видеть "общим" свой код.
Можете верстать модульно (в общем-то БЭМ это и подразумевает), то есть у вас есть блок шапки - создаете что-то типа css/header/style.css , js/header/scripts.js и в них уже работаете.
По поводу кнопок. используя SASS вы и не сможете писать стили по-другому, как это делают другие люди:
1. пишется кнопка, .button
2. пишутся классы цветов.
На SCSS это выглядит примерно так:
.button {
&__black {}
&__white {}
}
Собственно у вас будет один код, который задает кнопку (отступы, шрифты и тд), а доп.классами вы описываете уже цвета кнопки, возможно, еще и размер, каким-нибудь .button__fullwidth.
Соответственно в такой манере пишутся и любые другие похожие блоки, после чего, если вам надо какой-то один поменять, вы добавляете ему дополнительный класс, в котором меняете, например, цвет текста и цвет фона.
Вообще говоря, я пишу код по-разному, в зависимости от сложности проекта. В проектах, где производится большое количество взаимодействий с пользователем - нужно писать дополнительные стили (стиль для успешной операции, для неуспешной, стили для ошибок, информационных полей и тд). Все они пишутся так, как описано в вашем примере с кнопками. Ведь вам достаточно поменять какой-то параметр в вашем описании кнопки и все, не придется менять это везде. Это удобно. Плюсом, я делю блоки на модули, где каждый файл подключается из отдельной папки. Это удобно для структуризации кода.
Простой
Средний