Не пытайтесь найти универсальный способ, его нет.
Использовать нужно то, что актуально для конкретного элемента и конкретных требований к кроссбраузерности.
Элементарная сетка из блоков:
IE10+ => flexbox
IE9- => float + clearfix
IE9- и разная высота блоков в строке (картинка + 1-2 стоки текста под ней) => inline-block
в какой-то ситуации тут даже display: table будет иметь право на жизнь
"Прилипающее" при прокрутке меню:
position: fixed
position: absolute + js
position: sticky + js fallback
Кнопка с иконкой и текстом:
inline-block + vertical-align: middle для обоих элементов
position: absolute для иконки и padding для кнопки
display: flex для кнопки
Ну и т.д.
Учитесь решать конкретные задачи и искать для конкретных задач лучший способ.
По поводу сетки и в целом подхода к разметке страницы. Не утверждаю что это единственная истина и самый лучший вариант для всех и всегда, делюсь своим подходом.
Я
требую от дизайнеров использовать сетку, за исключением каких-то хитрых промо. И в общем-то проблемы отсутствия сетки в макете не встречал уже давно.
Считаю, что БЭМ - как идея организации стилей, наименования и решения проблемы отсутствия неймспэйсов в css - лучшее, что есть на сегодняшний день. Да, css-модули это интересно, но их просто открыв в блокноте styles.css не реализуешь.
Получается следующая идея.
Есть структурные блоки. Например, в классическом варианте это будет шапка, контент и подвал, сайдбар и основной контент, любая другая внутренняя структура, собранная из колонок сетки.
Есть независимые блоки, которые помещаются в структурные и в идеале должны в независимости от того, куда их воткнули выглядеть и работать как нужно.
Это позволяет быстро разметить страницу и реализовать адаптив, а так же не изобретать классы вроде header-left, footer-right в каждом блоке.
Средний
Простой