No title

Для облегчения и ускорения процесса рекомендую установить SublimeText и плагин HTML-CSS-JS Prettify.

Использовать форматирование можно нажав комбинацию клавиш Ctrl + Shift + H, либо из контекстного меню.

Тут небольшая инструкция по установке https://www.youtube.com/watch?v=j5m78ZZhMNA ;-)

Также, используя Emmet, мы ускоряем верстку в несколько раз, например если мне нужно написать width: auto; - просто набираю wa и кликаю tab, автоматом это превращается в width: auto;, mt+tab - автоматом превращается в margin-top: ; и т.д. Полный список сокращений тут https://webdesign-master.ru/blog/html-css/2.html

По облегчению написания css (и чтобы другим было легче с ними работать):

лучше использовать группировку селекторов, т.е. если несколько элементов имеют один и тот же стиль - указывать группу селекторов, разделяя их запятыми. Вот пример из нескольких классов голда:

.section-1 .section-block {

  display: flex;

}

.section-2 .select-plan {

  display: flex;

  justify-content: space-between;

}

.section-3 .site-width {

  display: flex;

}

и т.д.

Делаем вот так:

.section-1 .section-block,

.section-2 .select-plan,

.section-3 .site-width {

  display: flex;

}

Или например заголовки h1,h2,h3 имеют одинаковый цвет, font-weight и одинаковые отступы:

h1 {

font-size: 24px;

}

h2 {

font-size: 20px;

}

h3 {

font-size: 16px;

}

h1,

h2,

h3 {

color: #999;

font-weight: 400;

margin-bottom: 25px;

}

А конкретно в примере из голда лучше просто всем этим элементам присвоить одинаковый класс flex, который в css будет выглядеть:

.flex {

display: flex;

}

Ты так сделал с классом site-width, прописал его всем, кому надо и всё.

Также не стоит прописывать длинные правила из кучи слелекторов (в 4-5 штук), только при необходимости, если в каком-то блоке этот селектор имеет стиль отличный от других.