Написать каскадную таблицу стилей и сохранить ее на сервере сможет любой веб-мастер, но, увы, не каждый заботится о правильном, грамотном и оптимальном оформлении 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. Используйте условные комментарии.
Отформатированный код помогает не только при чтении браузером с сервера, но и удобен в редактировании и поиске нужных свойств. Писать в одну строку, наверное, самое правильное форматирование, но лично я предпочитаю писать каждое свойство в отдельной строке. Таким образом, я наглядно вижу каждый элемент таблицы.
5. Используйте шаблоны стилей, чтобы заново не перепечатывать практически идентичный код. Можно использовать библиотеки стилей, коих в интернете много. Так же бывает полезным использование Reset.css, который сбрасывает все настройки по умолчанию. Однако помните что библиотеки, какие бы они качественные не были, тоже нуждаются в оптимизации. К примеру, если в коде вы не используете свойства code или span, вам нужно будет убрать его из CSS вручную.
6. В конце оптимизации полезно сжимать код, убирая из него лишние пробелы и табуляции.
Существует много сервисов, предоставляющих возможность оптимизировать код. Но грамотнее будет, если вы приучите себя делать это вручную, ведь код, написанный человеком, не заменит автоматизированная машина.
166 |
0
