12 распространенных ошибок веб-разработчиков. Часть II

7. Ненужные свойства

Создав CSS файл, убедитесь, что отсутствуют селекторы с повторяющимися свойствами. Например, если я вижу, что к двум селекторам применяются одни и те же свойства:

CSS

#selector-1 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
} .selector-2 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}

Я объединяю их, а селекторы отделяю друг от друга запятой (,):

CSS

#selector-1, .selector-2 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}

Надеюсь, вы уже заметили общую тенденцию: старайтесь быть как можно более лаконичным и эффективным. В результате увеличиться скорость загрузки страниц и снизиться количество затрачиваемого на поддержание сайта времени.

8. Не используют альтернативные шрифты

В идеальном мире каждый компьютер имел бы любой шрифт, какой вам захочется. К сожалению, мы живем в несовершенном мире. Не учитывая @font-face, веб-разработчики ограничены несколькими так называемыми безопасными шрифтами (Arial, Georgia, serif и. т. д.).

Однако шрифты наподобие Helvetica, которые есть не на каждом компьютере, тем не менее, использовать можно. Решением служит стек шрифтов (font stack).

Стек шрифтов предоставляет разработчикам альтернативные шрифты.

Например:

CSS

#selector {
font-family: Helvetica;
}

Можно добавить альтернативные шрифты:

CSS

#selector {
font-family: Helvetica, Arial, sans-serif;
}

Теперь, если у пользователя Helvetica не установлен, он будет видеть сайт со шрифтом Arial, а если и это не сработает, то шрифт переключится на любой установленный шрифт из серии san-serif.

Задавая альтернативные шрифты, вы тем самым получаете больший контроль над тем, как отображать ваши веб-страницы.

9. Лишний пробел

Когда речь заходит о снижении размера файла CSS, для повышения производительности важна любая мелочь. В процессе разработки можно форматировать код по своему усмотрению. Но, когда проект становиться частью паутины и надо учитывать размер файлов, причин не убрать лишние литеры (процесс, названный minification) нет.

Слишком много разработчиков просто игнорирует уменьшение своих файлов перед запуском веб-сайтов, я думаю, это большая ошибка. Может показаться, что это не так уж и важно, однако в случае больших CSS файлов это может значительно улучшить время загрузки страниц.

10. Не систематизируют CSS в логическом

Когда пишите CSS, сделайте себе одолжение, упорядочьте свой код. Комментарии гарантируют, что в следующий раз, когда вы захотите изменить файл, вы все еще сможете ориентироваться в нем.

Как организовать файл целиком зависит от вас (пойдет все, что работает). Я, лично, создаю структуру своих стилей наподобие структуры, которая в данный момент есть у HTML. У меня есть комментарии, позволяющие различить шапку, тело, подвал и включенные секции.

Обычная ошибка при работе с CSS с который я часто сталкиваюсь, - пишут стиль, как только подумают о нем. Когда же потом не могут найти необходимое описания стиля, чертыхаются, что не организовали свой стиль как положено.

11. Используют одну таблицу стилей

Мнение субъективно. Поэтому проявите терпение и выслушайте мои доводы.

Я, подобно другим, верю, что для больших сайтов лучше всего разделить таблицу стилей на несколько отдельных файлов. Это облегчит поддержку сайта и улучшит его модульность. Возможно, я сделаю одну для CSS сброса, одну для IE-специфичных настроек и так далее.

Организовывая CSS, в отдельные таблицы стилей, я даю себе знать, где найти стиль, который я хочу изменить. Сделать это можно импортированием всех таблиц стилей в одну, наподобие этой:

CSS

@import url("reset.css");
@import url("ie.css");
@import url("typography.css");
@import url("layout.css");

Позвольте отметить, однако, что так удобно мне и многим другим разработчикам. Вы можете предпочесть «впихнуть» их все в один файл, в этом нет ничего страшного. Но если у вас возникают сложности в поддержке (обслуживании) одного файла, разбейте свой CSS на части.

12. Не включают таблицу стилей для печати

Для того чтобы изменять дизайн печатаемых страниц вашего сайта, необходимо применить и включить таблицу стилей для печати.

Это легко:

CSS

Использование таблицы стилей для печати позволит вам спрятать элементы, которые вы не желаете видеть напечатанными (такие как меню навигации), сбросить цвет фона до белого, создать альтернативное оформление параграфов, чтобы они лучше смотрелись на листке бумаги, и т. д.

Важно, что вы задумываетесь над тем, как ваша напечатанная страница будет выглядеть. Многие просто игнорируют это, а их сайты печатают то, что видно на экране монитора.

По материалам сайта http://sixrevisions.com Статья - 12 распространенных ошибок веб-разработчика.