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

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

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

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

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

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


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

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


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

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

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


Это:

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


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

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

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


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

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

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

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

  • FalleN

  • 1977

  • 1

  • 0

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!