Продолжаю разбирать работы студентов базового интенсива Академии. Вот фрагмент макета:
Студент пишет разметку блока «о нас»:
Рядом блок «контакты»:
Теперь CSS-файл. «О нас»:
«Контакты»:
Студент написал код для заголовка, затем скопировал и вставил для контактов. Тоже самое с текстом и кнопками. Похожих блоков на сайте много — код повторяется. Проблемы начнутся, когда макет надо будет поправить.
Я заметил, что размер заголовка по макету равен 47 пикселей, а студент поставил 44:
— Тут с размером заголовка косяк. Поправь, пожалуйста.
— Окей.
— Кстати, с межбуквенным расстоянием кнопок не досмотрел.
— Блин…
Лютый копипаст увеличивает размер кода и раздражение разработчика при очередных правках.
Как правильно
Найдите в макете повторяющиеся элементы. Чаще всего это:
- заголовки,
- основной текст,
- кнопки,
- списки.
Чтобы элементы были на виду, создайте новый документ в фотошопе и перенесите их.
Создайте классы, куда сложите общие элементы:
Осталось добавить тему к разметке:
А теперь представьте, что к вам пришел менеджер:
— Привет. Заголовки крупноваты, давай уменьшим. 25 пикселей будет ок.
— Через 10 секунд подойди.
9 секунд, чтобы открыть файл и найти класс, 1 секунда, чтобы внести изменения:
Любитель переменных скажет: «Зачем мне дополнительные классы? Я создам переменные.»:
Окей, пусть переменные. А что, если на мониторах увеличить заголовок до 60 пикселей?
Мы переопределили переменную, но размер не поменялся. Придется копировать:
Иными словами, мы вернулись к проблеме. Решение с классом:
Но если у вас будут css-переменные, то переопределение сработает.
Не пишите лишнего
В блоке «о нас» и в «контактах» у заголовка одинаковый отступ снизу. Хочется поддаться искушению и добавить отступ в общий класс:
Это неправильно, потому что в другом блоке отступ может поменяться. Используйте классы самого блока:
Ищите общие элементы в макетах. Не стесняйтесь упрощать себе работу.