Продолжаю разбирать работы студентов [базового интенсива](https://htmlacademy.ru/intensive/htmlcss) Академии. Вот фрагмент макета: ![Фрагмент макета «Девайс» от HTML Academy](https://bezugly.ru/api/uploads/blog/img_0231-2.jpeg) Студент пишет разметку блока «о нас»: ```html

О нас

Огромный выбор гаджетов не оставит равнодушным гика, который есть в каждом из нас

... Подробнее о нас

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

Контакты

... Напишите нам

``` Теперь CSS-файл. «О нас»: ```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; } ``` «Контакты»: ```css .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: - — Тут с размером заголовка косяк. Поправь, пожалуйста. - — Окей. ```css .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; } ``` - — Кстати, с межбуквенным расстоянием кнопок не досмотрел. - — Блин... ```css .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; } ``` Лютый копипаст увеличивает размер кода и раздражение разработчика при очередных правках. ## Как правильно Найдите в макете повторяющиеся элементы. Чаще всего это: - заголовки, - основной текст, - кнопки, - списки. Чтобы элементы были на виду, создайте новый документ в фотошопе и перенесите их. Создайте классы, куда сложите общие элементы: ```css .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; } ``` Осталось добавить тему к разметке: ```html

Контакты

... Напишите нам

``` А теперь представьте, что к вам пришел менеджер: - — Привет. Заголовки крупноваты, давай уменьшим. 25 пикселей будет ок. - — Через 10 секунд подойди. 9 секунд, чтобы открыть файл и найти класс, 1 секунда, чтобы внести изменения: ```css .theme__title { font-size: 25px; } ``` Любитель переменных скажет: «Зачем мне дополнительные классы? Я создам переменные.»: ```less // style.less @h2: 47px; .about__title { font-size: @h2; } ... .contacts__title { font-size: @h2; } ... .form__title { font-size: @h2; } ``` Окей, пусть переменные. А что, если на мониторах увеличить заголовок до 60 пикселей? ```less // style.less @media (min-width: 1600px) { @h2: 60px; } ``` Мы переопределили переменную, но размер не поменялся. Придется копировать: ```less // style.less @media (min-width: 500px) { @h2: 30px; .about__title { font-size: @h2; } ... .contacts__title { font-size: @h2; } ... .form__title { font-size: @h2; } } ``` Иными словами, мы вернулись к проблеме. Решение с классом: ```less // style.less @media (min-width: 1600px) { .theme__title { font-size: 60px; } } ``` Но если у вас будут css-переменные, то переопределение сработает. ## Не пишите лишнего В блоке «о нас» и в «контактах» у заголовка одинаковый отступ снизу. Хочется поддаться искушению и добавить отступ в общий класс: ```less .theme__title { ... margin-bottom: 45px; } ``` Это неправильно, потому что в другом блоке отступ может поменяться. Используйте классы самого блока: ```less // Общий стиль, который только описывает заголовок .theme__title { font-size: 44px; position: relative; padding-top: 45px; } // В блоке «контакты» и «о нас» отступ 45 пикселей .about__title, .contacts__title { margin-bottom: 45px; } // А здесь 60 пикселей .form__title { margin-bottom: 60px; } ``` [Пример кода на кодпене](http://codepen.io/shalfey41/pen/VPyprw?editors=0100) Ищите общие элементы в макетах. Не стесняйтесь упрощать себе работу.

Фронтенд-тимлид в команде рекламы и бизнеса ВКонтакте

Курсы

Популярные заметки