использовать готовые фреймворки и сетки - это одно. но если человек делает верстку без фреймворков - это не значит, что он делает ее без сетки. просто он создает свою сетку.
Как это делают крутые дяди-фронтендеры?
вот так и делают. создают свою сетку, которая будет во всем их устраивать.
а чем тебя не устраивает к примеру метод как у bootstrap 3. у элементов справа и слева паддинги по 10px в твоем случае. а для обертки magrin-left: -10px; и margin-right: -10px;
transition на display не работает, а на height надо задавать точную высоту, а не auto. так что либо делай через js. либо оперируй через max-height. сначала 0, потом 1000px к примеру
нормальные заказчики не отпускают верстальщика, пока бекендер не просмотрит финальный вариант верстки и не огласит список правок.
допустим верстальщик добавил изображения как backgroud через css. и как в таком случае бэкэнд-программист должен полученное изображение (а точнее путь к нему) поместить в CSS-код
удалить из css и прописать блоку напрямую через style="background: url();"