7 полезных привычек верстальщика сайтов
Единственная адекватная мера качества кода — это количество восклицаний «какого чёрта!» в минуту.
Роберт Мартин
Если не хотите прослыть верстальщиком-неряхой, развивайте в себе любимом(ой) полезные привычки:
1. Всегда используйте сброс стилей
Цель сброса стилей — устранение несоответствия между браузерами, которые устанавливают стили большинства элементов HTML по-умолчанию. Это гарантирует, что такие вещи, как размер шрифта и высота линии будут одинаковыми в разных браузерах.
Кроме того, сброс очищает поля и отступы, задаваемые некоторыми браузерами по-умолчанию.
Вот пример подобного сброса стилей от Эрика Мейера (Eric Meyer). Пользуйтесь на здоровье!
2. Используйте CSS сокращения
Сокращенная запись правил уменьшает объем файла стилей и на самом деле более наглядна. Например:
border-top: 5px;
border-right: 10px;
border-bottom: 15px;
border-left: 20px;
Гораздо кошернее выглядит в таком виде:
border: 5px 10px 15px 20px;
То же относится и к записи цвета. Например, #FFFFFF можно записать как #FFF, а #990055 как #905.
3. Добавляйте комментарии в файл стилей
Комментирование — полезнейшая привычка. Особенно когда файл стилей достаточно длинный. Ориентироваться в нем будет гораздо проще, если группировать наборы правил для отдельных блоков и помечать их соответствующими комментариями.
Коммент пишется просто:
/****************************************/
/* Sidebar */
/****************************************/
Т.е. все, что находится в пределах двух слэшей со звездочками, не будет прочитано браузером, но поможет верстальщику не заблудиться в собственном коде. Кроме того, такие комменты весьма полезны в качестве пояснений некоторых правил. Например, так можно пометить хак для конкретного браузера:
input[type=textbox] /* для IE6 */
4. Добавляйте описание используемых цветов
Когда файл стилей большой и в нем используется множество цветов оформления, то имеет смысл в самом начале в виде все того же комментария выписать эти цвета с пояснением, кто есть ху:
/*
/* light blue: #4595be
/* dark blue: #367595
/* special link red: #9F1212
*/
5. Используйте преимущественно margin вместо padding
Если не используете подкладочный фон, то применяйте отступы вместо полей для взаимного расположения блоков. Отступы margin более менее одинаково интерпретируются различными браузерами, нежели padding.
И кстати, проблем с кроссбраузерностью будет гораздо меньше.
6. Научитесь работать со спрайтами
Помимо того, что спрайты уменьшают количество http запросов при загрузке изображений, они же позволяют без задержек отображать работу ролловеров и упрощают файл стилей.
О спрайтах читайте здесь «Что такое спрайт и как его использовать»
7. Отвыкайте от em
Относительные размеры шрифта были актуальны несколько лет назад, когда не все браузеры умели корректно изменять размеры шрифта в зависимости от предпочитаемых пользователем настроек.
Сейчас это уже не актуально. А хлопот при верстке в относительных единицах хватает. Особенно дает о себе знать каскадность, когда дочерние элементы наследуют родительские настройки.
Проще писать все размеры шрифтов в пикселях и не морочиться.
По материалам статьи Джереми Дэвиса (Jeremy Davis) «15 CSS Habits to Develop for Frustration-Free Coding».
