7 полезных привычек верстальщика сайтов

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

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

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5,00 out of 5)
Загрузка...

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

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