Ivan Stroykin

Один общий файл css для общих стилей и дополнительно под каждый отдельный лендинг свой css. Таким образом будет легко всё поддерживать и по возможности легко убирать/добавлять.
Ну а на "продакшен" было неплохо еще все css "минифицировать"

PerfectPixel by WellDoneCode
Сам пользуюсь

codepen.io/StivinKing/pen/rLdpzr
Это на быструю руку, можно привести к более короткому коду
Иконки вырезаем с белым фоном, и с помощью абсолютного позиционирования (отталкиваясь от предка "text") расставить на свои места.
В итоге у нас из картинок только иконки

Вместо opacity нужно использовать background-color: rgba(...)
Для вашего примера, убираем opacity: 0.9; и вместо: background: #000; пишем: background-color: rgba(0,0,0,.9);

В алфавитном порядке не нужно.
Сначала "reset" свойства
Ниже основные правила (такие как работа со шрифтами и прочее)
Ниже правила для основных компонентов (заголовки, параграфы, формы и прочее, что не меняется из страницы к странице)
А дальше предпочитаю делить на блоки, к примеру:

/*-- TOPBAR --*/
.topbar {
    /* правила */
}
/*-- TOPBAR --*/

/*-- SIDEBAR--*/
.sidebar {
    /* правила */
}
.sidebar-box {
    /* дочерний элемент прописывается ниже родительского */
}
/*-- SIDEBAR--*/

Обычно большинство web-студий пользуются Bootstrap, чтобы сократить время разработки в несколько раз. Это удобно для них, и даже если верстал один, а потом передали его верстку другому, он сразу же сможет разобраться даже не вникая в суть.
А вот в компаниях, которые специализируются на больших проектах (проекты с развитием), уже редко встретишь данный фреймворк. Потому что он там вообще не к месту - все пишется с нуля и под нужды проекта, отсеивая каждую лишнюю строчку кода.

хм....все зависит от ситуации.
то что легко подгоняется

padding - ами и margin - ами

подгоняете ими, а остальное с помощью position

К примеру, вот это версталось с помощью pixel perfect.
p.s. 1 - это с помощью padding и margin, 2 - при помощи position

Старайтесь использовать position как можно реже. Только в самых необходимых случаях (я про absolute, fixed)

Если ничего не усложнять, то просто

body {
  overflow-y: scroll;
}

Если делать по уму, то это как в bootstrap

Два блока (правый и левый), а в левом блоке еще 2 блока.
codepen.io/StivinKing/pen/jqxjVr

Ну, если не хотите вдаваться в подробности языка JS, то можно воспользоваться готовыми методами, на подобии Tab от bootstrap (Ссылка) и, следуя инструкциям, ставите код.
И просто напросто в css меняете дизайн на свой.

Это так, на скорую руку если. У чисел ниже 1000 не будут выделяться последние 3 цифры.
Просто в любом нужном месте вызываем функцию и кидаем туда нужное значение.

function price($price){
  
  if($price >= 1000){
    $price1 = round($price / 1000, 0);
    $price2 =  substr($price, -3);
    return $price1 . '<span style="font-size: 0,9; color: red;">' . $price2 . '</span>';
  }
  else{
    return $price;
  }
  
}

<span class="PricebasePriceWithTax"><?=price($price);?></span>