Как писать меньше стилей и не бояться правок

Продолжаю разбирать работы студентов базового интенсива Академии. Вот фрагмент макета:

Фрагмент макета «Девайс» от HTML Academy

Студент пишет разметку блока «о нас»:

<section class="about">
	<h2 class="about__title">О нас</h2>
	<p class="about__text">Огромный выбор гаджетов не оставит равнодушным гика, который есть в каждом из нас</p>
	...
	<a class="about__btn" href="about.html">Подробнее о нас</a>
</section>

Рядом блок «контакты»:

<section class="contacts">
	<h2 class="contacts__title">Контакты</h2>
	...
	<a class="contacts__btn" href="contact-form.html">Напишите нам</a>
</section>

Теперь CSS-файл. «О нас»:

.about__title {
	font-size: 44px;
	position: relative;
	padding-top: 45px;
	margin-bottom: 50px;
}

.about__title:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 7px;
	background-color: black;
}

...

.about__btn {
	position: relative;
	max-width: 300px;
	padding: 0 18px;
	font-size: 18px;
	font-weight: bold;
	color: black;
	text-align: center;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
}

.about__btn:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 8px;
	background-color: #f0c52e;
	z-index: -1;
}

«Контакты»:

.contacts__title {
	font-size: 44px;
	position: relative;
	padding-top: 45px;
	margin-bottom: 50px;
}

.contacts__title:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 7px;
	background-color: black;
}

...

.contacts__btn {
	position: relative;
	max-width: 300px;
	padding: 0 18px;
	font-size: 18px;
	font-weight: bold;
	color: black;
	text-align: center;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
}

.contacts__btn:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 8px;
	background-color: #f0c52e;
	z-index: -1;
}

Студент написал код для заголовка, затем скопировал и вставил для контактов. Тоже самое с текстом и кнопками. Похожих блоков на сайте много — код повторяется. Проблемы начнутся, когда макет надо будет поправить.

Я заметил, что размер заголовка по макету равен 47 пикселей, а студент поставил 44:

• — Тут с размером заголовка косяк. Поправь, пожалуйста.
• — Окей.

.promo__title {
	font-size: 47px;
}

...

.about__title {
	font-size: 47px;
}

...

.contacts__title {
	font-size: 47px;
}

...

.form__title {
	font-size: 47px;
}

...

.goods__title {
	font-size: 47px;
}

• — Кстати, с межбуквенным расстоянием кнопок не досмотрел.
• — Блин...

.promo__btn {
	letter-spacing: 0.1em;
}

...

.about__btn {
	letter-spacing: 0.1em;
}

...

.contacts__btn {
	letter-spacing: 0.1em;
}

...

.form__btn {
	letter-spacing: 0.1em;
}

...

.goods__btn {
	letter-spacing: 0.1em;
}

Лютый копипаст увеличивает размер кода и раздражение разработчика при очередных правках.

Как правильно

Найдите в макете повторяющиеся элементы. Чаще всего это:

• заголовки,
• основной текст,
• кнопки,
• списки.

Чтобы элементы были на виду, создайте новый документ в фотошопе и перенесите их.

Создайте классы, куда сложите общие элементы:

.theme__title {
	font-size: 44px;
	position: relative;
	padding-top: 45px;
}

.theme__btn {
	position: relative;
	max-width: 300px;
	padding: 0 18px;
	font-size: 18px;
	font-weight: bold;
	color: black;
	text-align: center;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
}

Осталось добавить тему к разметке:

<section class="contacts">
	<h2 class="theme__title contacts__title">Контакты</h2>
	...
	<a class="theme__btn contacts__btn" href="contact-form.html">Напишите нам</a>
</section>

А теперь представьте, что к вам пришел менеджер:

• — Привет. Заголовки крупноваты, давай уменьшим. 25 пикселей будет ок.
• — Через 10 секунд подойди.

9 секунд, чтобы открыть файл и найти класс, 1 секунда, чтобы внести изменения:

.theme__title {
	font-size: 25px;
}

Любитель переменных скажет: «Зачем мне дополнительные классы? Я создам переменные.»:

// style.less
@h2: 47px;

.about__title {
	font-size: @h2;
}

...

.contacts__title {
	font-size: @h2;
}

...

.form__title {
	font-size: @h2;
}

Окей, пусть переменные. А что, если на мониторах увеличить заголовок до 60 пикселей?

// style.less
@media (min-width: 1600px) {
	@h2: 60px;
}

Мы переопределили переменную, но размер не поменялся. Придется копировать:

// style.less
@media (min-width: 500px) {
	@h2: 30px;

	.about__title {
		font-size: @h2;
	}

	...

	.contacts__title {
		font-size: @h2;
	}

	...

	.form__title {
		font-size: @h2;
	}
}

Иными словами, мы вернулись к проблеме. Решение с классом:

// style.less
@media (min-width: 1600px) {
	.theme__title {
		font-size: 60px;
	}
}

Но если у вас будут css-переменные, то переопределение сработает.

Не пишите лишнего

В блоке «о нас» и в «контактах» у заголовка одинаковый отступ снизу. Хочется поддаться искушению и добавить отступ в общий класс:

.theme__title {
	...
	margin-bottom: 45px;
}

Это неправильно, потому что в другом блоке отступ может поменяться. Используйте классы самого блока:

// Общий стиль, который только описывает заголовок
.theme__title {
	font-size: 44px;
	position: relative;
	padding-top: 45px;
}

// В блоке «контакты» и «о нас» отступ 45 пикселей
.about__title,
.contacts__title {
	margin-bottom: 45px;
}

// А здесь 60 пикселей
.form__title {
	margin-bottom: 60px;
}

Пример кода на кодпене

Ищите общие элементы в макетах. Не стесняйтесь упрощать себе работу.