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

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

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

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

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

30 января 2017