Vasing

zooks, flex не всегда возможно применить, так как его кроссбраузерность с IE10+. А вот float работает везде. Можно также использовать инлайн-блочные элементы для верстки. Все зависит от требований к проекту. А по поводу вопроса: да, верстка таблицами практически уже умерла. Сейчас респонсив и адаптив в моде. А их не реализовать с помощью таблиц.

А теперь уменьшайте ширину окна браузера и посмотрите как меняется страница. И подумайте сколько времени и усилий понадобится что бы сверстать так же на таблицах. И получится ли вообще.

Табличная верстка - это начало нулевых.
Сейчас нужна даже не div верстка через float, а семантическая с использованием Flex.

Foundation/Bootstrap + SASS/LESS и никакой боли нет, одно удовольствие верстать адаптивные сайты.

сделать красиво и лаконично - использовать rem.

rem не панацея от всех болезней. Вообще каждый юнит надо использовать осмысленно. Будь то px, rem, em или vm/vh/vmin. Все юниты нужны для своих целей и использовать только что-то одно глупо.

Существует ли какой-нибудь клёвый подход/методика?

mobile first. В целом же все зависит сильно от дизайна. Как по мне придумывать какие-то правила на эту тему - глупо.

В чём смысл использовать em?

А вы как думаете, зачем нужны относительные единицы измерений? Обычно их в контексте конкретных блоков используют. Например кнопки. вы выставляете размер шрифта у блока, а все что ниже подстраивается под этот размер.

Неужели нет единой методики, неужели в вёрстке всё так плохо

Единой методики быть не может априори. И не все так плохо. Ну а что до неудачных примеров - просто смеритесь что большинство просто не парится, работает и ладно. Методологии есть - SMACSS, BEM, etc... они не по адаптивной верстке, они просто по верстке. С тем же BEM (возможно слегка адаптированным под ваши нужды) можно изрядно уменьшить количество боли.