Spaceoddity

И в чём тут проблема?))
Представьте себе таблицу 3x3 c размером ячеек 25% 50% 25%. Как именно вы её будете реализовывать (table, блоки, флексбоксы, грид) - на ваш вкус.

Изолированные стили работают только в вашем проекте. И изолируют стили для отдельных компонентов - чтобы они не пересекались со стилями другого компонента. Например, в вашем проекте используются два калькулятора: простой и инженерный. Вот чтобы стили калькуляторов не пересекались - их изолируют. На самом деле это так себе практика. Всё это легко решается применением уникальных классов.
Ну и, конечно, если вы интегрируете свой проект в какой-то другой - никто не гарантирует что какие-то более специфичные стили целевого проекта не перепишут ваши. Так что уникальные префиксы для классов - вполне себе вариант.

"Не стоит плодить сущности без нужды" (с) У. Оккам
Разбивайте блоки по логическим и семантическим признакам. Т.е. просто задумайтесь - как ВАМ БУДЕТ УДОБНЕЕ потом работать.
Кнопки - окей. Выносите для них общие стили. А позиционирование делайте контекстным селектором от родителя. Либо навешивайте отдельный класс (именно для позиционирования).
Тут ещё такой момент, что вы заранее не можете знать насколько общие стили будут иметь эти "переиспользуемые блоки" (ну серьёзно, у меня уже просто люто бомбит от этого БЭМа, переиспользуются в основном как раз элементы, но по "семантике БЭМа" - это, мать их за ногу, блоки)))
Например, вы вынесли весь декоратив в общий стиль. А для модификации оставили позиционирование. А зватра вам дизайнер даёт практически идентичную кнопку, но другой высоты. Вы её можете контекстом снова поправить. А послезавтра снова другая высота. И в итоге получается что выносить надо как раз стиль для поздних кнопок, а вот первую делать "модифицируемой".
Так что я бы просто набирал стили as is. А уж потом, при желании, можно и рефакторинг сделать - и объединить, вынести какие-то отдельные стили.

.menu__item {
  white-space: nowrap;
}

https://chrome.google.com/webstore/detail/perfectp...
Лепите макет поверх страницы и в веб-инспекторе подгоняете размеры. Измерять линейкой для pixelperfect не лучший вариант - как минимум, рендеринг шрифтов будет разный (и междустрочное).

h1, h2, h3, h4, h5, h6, h7{
 font-size:24px !important;
 margin:0 !important;
}

заголовок и так блочный элемент

Это от многих факторов зависит. Ну и CMS обычно используют не для разработки, а для клиента (которому как раз и надо контентом управлять).

<table>
А вообще непонятно что вы хотите? Таблицу с числами от 5 до 100? Если чисел меньше 100 - пустые ячейки должны отображаться? Если строк меньше 10 - пустые строки должны отображаться?

Да заберите всю цсс-ку - делов-то))