Грамотное написание CSS-кода

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

Это неправильно! Удаляя из таблицы стилей ненужные элементы, вы облегчаете работу браузера на чтение лишней информации. Тем самым вы делаете загрузку сайта быстрее.

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

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

h1 {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px
}

Можно заменить на:

h1 {
padding: 5px 10px 5px 10px;
}

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

2. Свойства background можно так же вписать в одну строку. К примеру, за место этого:

body {
background:url(img//fon.png);
background-repeat:no-repeat;
background-position:right top;
}

Это:

body {
background: url (img/fon.png) no-repeat right top;
}

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

4. Используйте условные комментарии.

<!--[if ! IE 7]>Инструкции для IE 7<![endif]-->

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

5. Используйте шаблоны стилей, чтобы заново не перепечатывать практически идентичный код. Можно использовать библиотеки стилей, коих в интернете много. Так же бывает полезным использование Reset.css, который сбрасывает все настройки по умолчанию. Однако помните что библиотеки, какие бы они качественные не были, тоже нуждаются в оптимизации. К примеру, если в коде вы не используете свойства code или span, вам нужно будет убрать его из CSS вручную.

6. В конце оптимизации полезно сжимать код, убирая из него лишние пробелы и табуляции.

7. Готовый код обязательно проверяйте валидатором (validator.w3.org). Это позволит выявить недостатки и ошибки.