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».

24.01.2011

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

Оставить комментарий: