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

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

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

Начнем:

Плохие CSS практики

Повторное использование правил

Множество новичков применяют к одному элементу какое-то правило несколько раз. Используйте атрибут class, если вам нужно создать правило для нескольких элементов.

К примеру, не используйте правило color: blue на каждом элементе или идентификаторе отдельно:

#intro1 {color: blue; font-size: 10px; font-weight: bold;}
header {color: blue; font-size: 20px; background-color: green;}
#banner {color: blue; font-size: 30px; background-image: url(images/static.jpg);}

Лучше занесите его в класс:

.blue {color: blue;}

Присвоение селектора ID нескольким элементам

При написании CSS идентификатор в HTML должен быть всегда уникальным. Если необходимо присвоить стили к нескольким элементам, используйте классы.

К примеру, так делать нельзя:

<p id="big">This is a great heading.</p>

<p id="big">This is absolutely a greater heading.</p>

Необходимо делать так:

<p class="big">This is a great heading.</p>

<p class="big">This is absolutely a greater heading.</p>

Повсеместное использование правила !important

Правило !important появилось ближе к концу 90-х, чтобы помочь веб-дизайнерам и разработчикам переписывать правила в стилях. Правило !important главнее всех предыдущих стилей и говорит «Я намного важнее, забудь обо всех других стилях и используй меня!». Если полениться и навтыкать везде это правило сейчас, то потом работа с вашими стилями будет сплошной головной болью.

К примеру:

header { 
    color: red; 
}
header.intro {
    color: blue !important;
    font-size: 20px;
}
header#capture { 
    color: green; 
    font-size: 20px;
}

В примере выше цвет хедера красный, кроме хедера с классом intro и еще одного хедера с идентификатором capture. В нашем случае важность свойств color и font-size определяется специфичностью селекторов.

Правило !important работает на уровне свойств, а не селекторов, а значит, свойство color важнее свойства font-size. Кроме того, свойство color с правилом !important важнее свойства color в селекторе header#capture.

Совет: Используйте правило !important только при переписывании пользовательских стилей, стороннего кода, инлайновых стилей и вспомогательных классов.

Правило !important часто считается плохим стилем, так как оно может внести неразбериху в один из основных механизмов CSS – специфичность.

Неэффективное использование CSS селекторов

Чем длиннее селектор, тем больше его специфичность, что может негативно отразиться на стилях вашего сайта.

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

К примеру, эти длинные селекторы:

#header #intro h1.big a {... }

#header #intro h1.big a.normal {... }

Можно сжать до второго или третьего уровня:

.big a {... }
.big .normal {... }

Большое количество веб-шрифтов

Понятно, что типографика является основой хорошего дизайна, бренда и залог хорошей читаемости текста.

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

Оптимизация веб-шрифта и время его загрузки могут повлиять на размер страницы и время рендеринга.

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

Использование инлайновых стилей

Инлайновые стили – возможно, одна из худших CSS практик, которой веб-дизайнеры и разработчики грешат до сих пор. При таком подходе нарушается основная цель CSS – разделение стилей и HTML структуры. Также это негативно сказывается на специфике веб-страниц.

Хорошей привычкой считается разделение CSS и HTML. Инлайновые стили затрудняют изменение дизайна сайта, а также усложняют работу с кодом.

Но из-за отсутствия поддержки множества правил в email клиентах, инлайновые стили можно использовать в HTML версиях электронных сообщений.

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

Хорошие CSS практики

Мы закончили говорить о плохих практиках в CSS, теперь перейдем к хорошим.

Комментирование CSS

При создании стилей крайне рекомендуется использовать комментарии для оглавления разделов. Так вы сможете легко перемещаться по коду во время разработки. Сохраняйте упорядоченность кода, это поможет намного эффективнее писать стили.

Взгляните на пример ниже:

/* Project Meta */

/* reset  */

/* general */

/* typography */

/* grid */

/* header */

/* footer */

/* Page template A */

/* Page template B */

/* Media Queries */

Поддерживайте читаемость CSS

Чистота при написании правил сделает код более читаемым. С хорошо читаемым CSS кодом намного легче работать в будущем, когда ваш проект станет крупнее – так вы сможете намного быстрее находить нужные вам строки.

Повысить читаемость кода можно двумя способами.

1. Запись в одну строку

.box {background: green; border: 1px solid black;}

2. Обычная форма записи

.box {
background: green;
border: 1px solid black;
}

Отделяйте стили плагинов JQuery

Если у вас в проекте используются плагины jQuery, вам нужно поместить их стили в отдельный файл и дать файлу легко запоминающееся название наподобие JS-plugin.css. Это поможет разграничить все CSS стили. Особенно полезно, когда вам понадобится добавить код или изменить стили какого-либо плагина JQuery.

Сбрасывайте стили с помощью CSS Reset

CSS Reset или стили сбросов – это сжатый или минифицированный набор CSS правил, который сбрасывает все стили в HTML разметке. Сбросы снижают риск конфликтных ситуаций в браузерах, а общие стили можно модифицировать и расширить.

Самым популярным способом является сайт MeyerWeb. Есть и другие способы, к примеру, normalize.css Николаса Галлахера – современный способ сброса, поддерживающий HTML5. Сбросить стили можно, как подключив файл в HTML документе, так и скопировав код в свои стили.

Размещайте CSS3 анимацию в конце файла

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

Объединяйте элементы

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

К примеру, у ваших заголовков h1, h2 и h3 есть одинаковые свойства font-family и color.

h1, h2, h3 {font-family: 'Lato', sans-serif; color: #dadada;}

Используйте сокращенные свойства

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

К примеру, свойства margin-top, margin-right, margin-bottom, margin-left можно объединить в одну строку.

#div {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 3px;
margint-left: 4px;
}

#div {
margin: 10px 10px 3px 4px; // top, right, bottom left 
}

Всегда используйте комментарии

Одна из лучших практик в CSS – комментировать группы кода. Так вы сможете легко находить нужный участок кода.

/* ОСНОВНЫЕ ПРАВИЛА */

html, body {
font-family: 'Lato', sans-serif;
height: 100%;
background: #ecf0f1;
overflow: hidden;
}

h1 {
color: #3498db;
text-align: center;
font-size: 35px;
margin: 100px 0px;
font-weight: 700;
}

Используйте вендорные префиксы

Для отслеживания изменений в поведении браузеров крайне рекомендуется добавлять префиксы к нестандартным CSS свойствам.

Основная задача вендорных префиксов – это не поломать код во время его выполнения.

Вендорные префиксы бывают:

• Chrome: -webkit-
• Firefox: -moz-
• iOS: -webkit-
• Opera: -o-
• Safari: -webkit-

К примеру, если вы хотите добавить CSS3 свойство transition, вам понадобится прописать само свойство, скопировать его пять раз и дописать вендорные префиксы.

Вот что у вас получится.

-webkit-transition: all 6s ease;
-moz-transition: all 6s ease;
-ms-transition: all 6s ease;
-o-transition: all 6s ease;
transition: all 6s ease;

Сжимайте CSS файлы

Еще один способ повысить эффективность кода – уменьшить размер файла с помощью сервисов типа CSS compressor или Minify CSS. Это должно уменьшить время загрузки файлов. Сервисы по сжатию файлов стилей убирают все пробелы, переводы на новые строки и повторяющиеся стили.

Задавайте цвета в шестнадцатеричной системе счисления

Мнения в сети разделились по поводу того, что лучше, использовать Hex обозначение цвета или все-таки ключевые слова. Отдельные браузеры могут не понимать некоторых названий цветов. С помощью шестнадцатеричной формы можно записать все 16,777,216 цветов, а вот с помощью HTML и CSS всего 140. В CSS нет имен для всех 16 миллионов 24-битных цветов, так что лучше использовать шестнадцатеричную форму записи.

Более подробно об этом можно прочитать в спецификации CSS Color Module Level 3.

Валидация

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

Проверьте!

Что дальше?

Мы обсудили хорошие и плохие CSS практики, теперь пора применить полученные знания.

Если веб-дизайнер или разработчик может легко и быстро изменить любую часть кода, не затронув при этом другие части, это признак удобно написанного HTML, CSS или JavaScript кода.

А что вы думаете? Какие хорошие и плохие привычки в CSS знаете вы? Пожалуйста, пишите об этом в комментариях.

В заключении статьи хотел сообщить новость от нашей команды. Буквально на днях мы записали совсем свежий пошаговый курс по основам адаптивной верстки с полного нуля на HTML5 и CSS3.

В данном мини-курсе мы с вами из PSD-макета Adobe Photoshop сверстаем полноценную HTML- страницу. При верстке страницы будем использовать новые теги и новые возможности HTML5 и CSS3.

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