О фронтенде

Помогаю создавать хорошие сайты

Проектируйте компоненты

Продолжение статьи «Как писать меньше стилей и не бояться правок».

Когда я смотрю проекты студентов Академии, вижу одну картину:

Разные классы для общих элементов.

По дизайну здесь одинаковые заголовки, текст и кнопки. Для каждого такого блока студент задает отдельный класс и копирует стили. Когда придет дизайнер и попросит поменять цвет кнопок, придется пройтись по всем этим классам и поменять стиль. Чтобы не было так больно, спроектируйте компоненты.

Откройте все страницы макета и найдите общее:

  • Шрифт, размер заголовков и текста
  • Кнопки
  • Инпуты: текстовые, радиокнопки, чекбоксы
  • Цвета
  • Закругления

Соберите компоненты в фотошопе или скетче, чтобы было наглядно:

Собрал общие цвета, заголовок, текст, кнопку и инпуты.

Теперь переведите компоненты в код.

Для цветов, размеров и закруглений используйте переменные:

// Переменные на LESS
@color-primary: #65D0BC;
@color-secondary: #444444;

@title-size: 24px;
@text-size: 16px;

@border-radius: 4px;

С компонентами посложнее. Для каждой задачи свой вариант:

Создать миксины
Делаем миксин под каждый блок и добавляем в классы:

// Миксины на LESS
.title() {
  margin: 0;
  font-size: 25px;
}

// Классы на страницах
.item__title {
  .title();
}

.reviews__title {
  .title();
}

Создать отдельный блок с классами
Блок theme. Этот метод описывал в статье:

// CSS
.theme__title {
  margin: 0;
  font-size: 25px;
}

<!-- HTML -->
...
<h2 class="theme__title item__title">Вязаные корзинки</h2>
...
<h2 class="theme__title reviews__title">Отзывы</h2>
...

Классы item__title и reviews__title нужны, чтобы задать отступы и другие стили для дизайна этого блока. theme__title отвечает только за заголовок.

Создать отдельные классы
Создаем отдельные классы title, text, button и добавляем в HTML:

// CSS
.title {
  margin: 0;
  font-size: 25px;
}

<!-- HTML -->
...
<h2 class="title item__title">Вязаные корзинки</h2>
...
<h2 class="title reviews__title">Отзывы</h2>
...

Получится так:

Тоже самое, что и с theme__title, отличие только в методологиях. Здесь мы делаем отдельный блок для каждого класса, а в theme собираем элементы под одним блоком.

Задать глобально
Задаем стили прямо для h1, h2, p и так далее. Опасный вариант, потому что мы привязываемся к определенным тегам и если тег не вписывается в дизайн, то его придется переопределять.

Но глобальные стили удобны для блогов. Если мне надо сделать блог, я оборачиваю в теги блок content:

<!-- HTML -->
<article class="content">
  <h1>Фронтенд-разработка</h1>
  <p>Верстаю семантично, адаптивно и кроссбраузерно.</p>
  <p>Раньше использовал Pug (Jade), потом перестал.</p>
</article>

// CSS
.content {
  h1 {
    margin: 0;
    padding-top: 40px;
    font-size: 40px;
  }
  
  p {
    margin: 0;
    padding-top: 15px;
    font-size: 18px;
  }
}
Делайте компоненты — не стыдитесь работать меньше.
16 апреля  

Sass или Less?

Студенты Академии спрашивают: «А что круче — Sass или Less?».

Берите любой. В работе вам понадобятся вложенности, переменные и миксины — эти функции есть во всех препроцессорах.

12 апреля  

Как писать HTML и CSS быстро: emmet

Эммет — инструмент, который поможет писать HTML и CSS быстро. Сравните:

Слева пишем обычным способом, справа с помощью эммета.

Как это работает: пишем комбинацию, жмем Tab и код раскрывается в HTML.

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

HTML

Повторим алгоритм: пишем комбинацию, жмем Tab и код раскрывается в HTML.

Див или любой другой тег

Пишем тег и раскрываем:

Тег с классом

Чтобы написать класс, поставьте перед названием точку, прям как в CSS. Если написать класс без тега .my-class, то комбинация раскроется в

<div class="my-class"></div>

Вложить тег в тег

Чтобы записать код внутри тега, поставьте знак >

Теги друг за другом

Чтобы расположить теги друг за другом, поставьте знак +

Несколько одинаковых тегов

Поставьте знак умножения *, чтобы размножить теги:

Текст в теге

Оберните текст в фигурные скобки, чтобы он раскрылся внутри тега:

Рыбный текст

Если не хотите придумывать текст, ставьте шаблонный. Комбинация lorem раскрывает абзац текста. Если дописать цифру lorem2, то раскроется то количество слов, которое вы указали:

Этого хватит для большинства случаев, остальное в документации.

CSS

Алгоритм такой же: пишем комбинацию, жмем Tab и получаем CSS.

Свойства

Просто вводите первые буквы свойств:

  • fw → font-wegth,
  • fz → font-size,
  • fs → font-style,
  • w → width,
  • h → height.

Свойства и значения

Можно вводить свойства сразу со значениями:

  • df → display: flex,
  • dib → display: inline-block
  • w15 → width: 15px,
  • p12 → padding: 12px.

Если не хотите пиксели, дописывайте единицу измерения — fz2em → font-size: 2em.

Множественные значения

Чтобы проставить значения подряд, пишите через дефис: p10-12-15.

Как установить эммет в редактор кода

  • Sublime Text 3
  • Brackets
  • Atom
  • В Visual Code эммет встроен по умолчанию
  • В WebStorm эммет встроен по умолчанию
  • Остальные редакторы смотрите в списке

Эммет помогает писать быстро, но все комбинации сразу не запомнить. Поначалу пользуйтесь шпаргалкой, постепенно запомните.

12 апреля  

Как пройти интенсив HTML Academy. Часть 2: во время интенсива

Курс молодого бойца «Как пройти интенсив HTML Academy»

Рассказываю, как проходить интенсивы Академии с максимальной пользой:

  1. До интенсива
  2. Во время интенсива
  3. После интенсива (не опубликовано)

Сегодня поговорим, как работать на интенсиве, чтобы сдать проект и усвоить навыки.

Читать материалы и проходить демки

К каждому занятию преподаватели Академии выкладывают материалы: статьи, инструменты, главы из книг. Советую читать их 2 раза:

  • Сразу после лекции, чтобы детально разобраться в теме.
  • Перед выполнением домашнего задания, чтобы вспомнить, о чем говорили на лекции.

Иногда материалов скидывают много, и за раз их не осилить. Если не получается прочитать все — забейте, ведь вас будут оценивать по домашнему заданию, а не по прочитанным материалам.

Еще есть демки. Преподаватели пользуются ими во время занятия, чтобы показать по шагам, как верстать шапку или как сделать модальное окно — к каждой теме своя демка. Они доступны после занятия и вы сможете сами пройти путь по шагам.

Некоторые домашние задания сделаны по аналогии с демками, чтобы было проще. Не стоит копировать код из демки, потому что вы ничему не научитесь. Если не понимаете, как работает код в демке — записывайте вопрос наставнику.

Вовремя сдавать задания

На этом этапе сливается большинство студентов, поэтому расскажу подробно.

Допустим, занятия проходят в понедельник и пятницу. Вы прошли занятие в понедельник, и к пятнице вам надо написать html для 2 страниц:

Новичок Опытный
Прикидывает, что сделает задание за два дня. До среды занимается другими делами. Во вторник набрасывает алгоритм и делает первый подход. Рассказывает наставнику, как планирует делать задание и отправляет сырую верстку, чтобы показать, что он имеет в виду.
Приступает в среду вечером. Появляются первые трудности, но студент не пишет наставнику, а разбирается сам. В среду наставник пишет правки и говорит, как лучше сделать.
Упорно верстает в четверг, борется с трудностями, тратит ночь и сдает работу под утро пятницы. До четверга студент верстает страницы, советуется с командой и отправляет наставнику.
Наставник находит ошибки и не принимает работу. У студента нет сил исправлять, потому что он всю ночь работал и не выспался. В четверг наставник пишет правки. В пятницу студент дорабатывает проект.
Начинается новое занятие, задание не выполнено. Начинается новое занятие, задание выполнено.

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

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

Разбили задачу на маленькие кусочки. Сделали кусок — показали наставнику. Сделали следующий — показали наставнику.

Работайте над проектом каждый день по чуть-чуть и показывайте работу наставнику, чтобы убедиться, что все в порядке.

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

Я думаю, что основная часть студентов сливается, когда информации становится слишком много. Вот студент молча делает огромное задание неделю, отдает на проверку, и ему сваливается куча правок из разных областей: тут верстка невалидная, тут неправильный тег использовал, тут не по БЭМ, а тут с клавиатуры не работает. Если эту информацию разбить в течение недели, будет полегче.

Работать с наставником

Наставник помогает перейти на следующий уровень. Если вы стажер, он поможет стать младшим разработчиком. Если вы младший разработчик — специалистом. Наставник подсказывает, в каком направлении развиваться и что делать.

Наставник должен быть опытнее вас. Если чувствуйте, что по уровню вы одинаковые — ищите другого наставника.

Наставник проверяет проект по критериям. Если критерии не будут выполнены, то наставник не зачтет работу. Перед сдачей работы сверяйтесь с критериями, чтобы потом не переделывать.

Хотите меньше правок — сверяйтесь с критериями.

Бомбить вопросами наставника по 15 раз в день нехорошо, потому что он тоже работает и у него есть другие студенты. Я работаю с менторами так: записываю вопросы в течение дня и утром все обсуждаю. Каждый день по 15—20 минут. Это лучше, чем 15 раз в течение дня, потому что:

  • До общения с наставником вы можете уже что-то нагуглить или обсудить с командой
  • Наставнику не надо на вас часто переключаться — это отвлекает от работы. Если наставник будет часто переключаться, вы испортите отношения, и он будет выходить на связь 2 раза в неделю на полчасика, как написано в регламенте.

Работать с командой

Команда — это студенты, которые работают с одним наставником.

В команде делятся опытом: обсуждают тонкие моменты в проектах, рассказывают, кто как заверстал страницы, объясняют друг другу темы. Команда дополняет наставника.

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

Иногда наставник объединяет студентов в общий чат, чтобы получилась команда. Если вас не объединили, попросите наставника об этом сами.

Работать над своим проектом

Если вы успеваете делать учебный проект, работайте над своим.

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

В своем проекте появятся дополнительные проблемы и вопросы. Если вы их решите, то наберетесь опыта еще быстрее. Но работать над несколькими проектами тяжело. Если чувствуйте, что не успеваете — оставьте на потом, иначе рискуете перегореть и не набраться опыта вообще.

10 апреля  

Как пройти интенсив HTML Academy. Часть 1: до интенсива

Курс молодого бойца «Как пройти интенсив HTML Academy»

Рассказываю, как проходить интенсивы Академии с максимальной пользой:

  1. До интенсива
  2. Во время интенсива
  3. После интенсива (не опубликовано)

Учиться в Академии тяжело: судя по отчетам, около 40% участников не сдают проект. Чтобы усвоить знания и не слиться, стоит подготовиться.

Составить список тем

Допустим, вы идете на верстку 2 уровня. Откройте программу интенсива и выпишите темы, которые не знаете. У меня получился такой список:

  • Методология БЭМ
  • Less, Sass
  • Gulp и Grunt
  • Тег picture
  • SVG-спрайты
Программа занятия по препроцессорам и автоматизации. Видите незнакомые слова — пишите в список.

Изучить

Теперь пора погуглить по каждой из тем. Достаточно ответить на 3 вопроса:

  1. Что это такое?
  2. Зачем нужно?
  3. Где применяется?

Вот я гуглю «Методология БЭМ» и перехожу по первой ссылке:

Сайт ru.bem.info

Статей и видео по каждой теме много. Не стоит читать все подряд, главное понять, что это за технология, в чем польза и где ее применяют.

Применить на своем проекте

Сначала просто запустите технологию и убедитесь, что она работает. Если не хватает документации, поищите видео на ютубе. Например, по Less и Sass куча пошаговых руководств.

Потом попробуйте использовать технологию на своем проекте. Если нет проекта — придумайте: сайт-портфолио, сайт про увлечения или сайт другу.

Берите реальный проект, не придумывайте упражнения. Как мы придумываем упражнения: вспоминаем, что умеем → подбираем задание под свои возможности. Реальный проект нацелен на результат, независимо от возможностей:

Упражнение Проект
Создать миксин и добавить его к тегу `button` Заверстать страницу про свои увлечения на Less
Создать переменную Создать адаптивную страницу, используя переменные
Сделать миксин Заверстать 3 страницы сайта и применить миксины на общих элементах

Если вы отработаете технологию на реальном проекте, то сможете оценить, насколько вам удобно пользоваться инструментом. На лекции вы уже будете в теме, и прокачаетесь еще сильнее. Упражнения такого эффекта не дают.

Не придумывайте упражнения — берите реальный проект.

Некоторые спрашивают: «Зачем изучать темы самостоятельно, если на интенсиве и так все расскажут?».

Как проходит неделя студента, который не готовился заранее. Допустим, было занятие по препроцессорам:

  • Студент слушает лекцию и про препроцессоры.
  • Тратит день на чтение статей, чтобы понять, зачем нужны препроцессоры и какой вообще выбрать.
  • У студента появляются базовые вопросы: не получается подключить препроцессор, стили не отображаются.
  • Команда и наставник помогают — студент начинает верстать. К вечеру накапливается список вопросов.
  • Наставник отвечает на вопросы, студент вникает, но начинается следующее занятие.
  • Студент забивает на лекцию, чтобы сделать задание по препроцессорам — без принятого задания дальше не пройти. Ничего, на выходных посидит подольше и догонит группу.
  • На выходных студент смотрит лекцию, появляется еще больше вопросов. Плюс наставник подвозит список правок по заданию с препроцессорами. Мозг кипит, знания смешиваются в кашу.
  • Через пару занятий студент сливается от перегруза.

Чтобы мозг не кипел, изучите темы заранее. А на лекции разберетесь в тонкостях работы.

9 апреля  

Сначала погуглить, потом к наставнику

Когда у меня не получалось верстать, я сразу просил старшего коллегу наставника помочь. Мне было стыдно, что я бегал к нему по 12 раз в день, но он мгновенно давал решения, и я привык так быстро получать ответы. Через неделю он не выдержал и после очередного вопроса спросил:

— Слушай, а ты гуглить пробовал?

Я погуглил и по первой ссылке нашел решение. Тогда я понял, что не стоит бегать к наставнику по всем вопросам, потому что такая назойливость испортит отношения. В тот день я завел правило:

Сначала погугли

Но давайте на чистоту: намного проще сразу пойти к наставнику — в 9 из 10 случаев он знает решение, и не надо искать самому. Но учтите:

  • Если вы хотите выйти из младших разработчиков, приучайтесь к самостоятельности — специалист умеет сам решать проблемы.
  • Часто нагуглить решение быстрее. Если у вас популярный вопрос, то вы узнаете ответ через 10 секунд. С наставником так не получится: пока вы напишете в чате, пока он ответит и задаст вопросы, пройдет куча времени.
Просто попробуйте сначала погуглить

Гугл не всегда спасает. Иногда находишь решение, но у тебя оно не работает.

Иногда, я по 5 часов искал решение: перерыл стаковерфлоу, читал статьи на русском, на английском, попробовал все, что нашел. В итоге, собираюсь с силами, иду к наставнику и смотрю, как он решает проблему за 20 секунд.

И вот спрашивается: “чего сразу-то не пошел?” Для таких случаев у меня тоже есть правило:

Если проблема не решается в течение часа — пиши наставнику

Вы начали верстать и у вас что-то не получается. 3 варианта развития:

  • Погуглил → нашел решение → разобрался и понял
  • Погуглил → нашел решение → все получилось, но не понятно, как это работает
    Расскажите наставнику, что у вас была проблема, вы ее решили, но не понимаете, почему все работает.
  • Погуглил → просидел час и не нашел решения
    Запишите вопрос и идите к наставнику.
Сначала погуглить, потом к наставнику
9 апреля  

Простой лейбл с инпутом

Если вы пишите лейбл с инпутом только так, статья для вас.

<label for="my-input">Лейбл для инпута</label>
<input id="my-input" type="text" />

Предлагаю заверстать форму, где инпутов много.

Фильтр компьютеров в юлмарте
Фильтр компьютеров в юлмарте

Готов поспорить, что вы устанете придумывать айди шестидесяти семи инпутам. Еще придется следить, чтобы айди не повторялись, иначе будет ошибка:

Делайте проще

<label>
  <span>Лейбл для инпута</span>
  <input type="text" />
</label>

Айди придумывать не надо. А чтобы добавить новый инпут, достаточно просто скопировать код.

Подход удобен, чтобы стилизовать радиобаттоны или чекбоксы.

Чтобы написать конструкцию с помощью эммета, напишите label{Текст}>input. Строка развернется так:

<label for="">Текст<input type="text" /></label>

Но при нажатии на текст инпут не сработает. Это потому, что у лейбла стоит атрибут for. Даже если for пустой, он будет искать инпут с таким же айди. Чтобы сработало, удалите for.

See the Pen Лейбл с ошибкой by Dmirty (@shalfey41) on CodePen.

label>input хороший прием, но смотрите по ситуации. Например, если делаете слайдер на CSS, смело отделяйте.

Хорошая сетка

Студенты Академии верстают каталог:

Учебный проект «Техномарт» в HTMLAcademy
Учебный проект «Техномарт» Академии

Заверстаем сетку для списка перфораторов. Добавляю карточкам отступ справа 20 пикселей, а у каждой третьей убираю:

.grid__item {
  margin-right: 20px;
}

.grid__item:nth-child(3n) {
  margin-right: 0;
}
Сетка на марджинах

Получилось хорошо. Но при таком подходе придется следить за размером экрана и дописывать стили.

Давайте уменьшим размер окна, чтобы осталось по две карточки. Сетка сломалась, потому что у каждой третьей карточки нет отступа.

Поменяли размер экрана

Сетка должна быть резиновой. Я нашел решение в коде бутстрапа. Давайте повторим.

Чтобы все получилось, я создал контейнеры для списка, элементов и контента. Пусть будет 3 карточки:

<div class="grid__list">
  <div class="grid__item">
    <div class="grid__content"></div>
  </div>

  <div class="grid__item">
    <div class="grid__content"></div>
  </div>

  <div class="grid__item">
    <div class="grid__content"></div>
  </div>
</div>

Проставим отступы. Представьте 2 карточки рядом. У первой карточки отступ справа 10 пикселей, а у второй — такой же отступ слева. В сумме 20 пикселей:

.grid__item {
  padding-left: 10px;
  padding-right: 10px;
}

Теперь между карточками расстояние 20 пикселей. Почти готово, но у самой первой карточки ненужный отступ слева 10 пикселей, а у последней — справа. Чтобы исправить, добавлю отрицательный отступ для всего списка:

.grid__list {
  margin-left: -10px;
  margin-right: -10px;
}

Вот и все. Хорошая сетка сохранит время и количество кода. Особенно, если сайт адаптивный.

С первого раза понять прием тяжеловато. Откройте пример и поиграйтесь с отступами, чтобы понять, на что они влияют.

Но как же justify-content: space-between?

Некоторые делают сетку проще:

.grid__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.grid__item {
  width: 200px;
}

Но что, если в каталоге будет не 9 товаров, а 5?

Карточки разъехались. Я уже не говорю о разных размерах экрана.

Это не значит, что justify-content: space-between нельзя использовать — если вы знаете, что в макете будет два элемента, которые прижаты по бокам, то space-between справится лучше всех.

Старайтесь предугадывать, как может измениться ваша верстка: «Что, если будет 5 карточек? А что, если сайт будет адаптивным?» — вам же над сайтом и работать. А если и не вам, то не стоит заставлять другого разработчика переписывать ваш код. Думайте наперед.

Итоговая сетка.

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

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

Фрагмент макета «Девайс» от 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;
  }
}

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

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

.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;
}

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

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