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

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

Главная » Уроки » CSS

Написать каскадную таблицу стилей и сохранить ее на сервере сможет любой веб-мастер, но, увы, не каждый заботится о правильном, грамотном и оптимальном оформлении 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). Это позволит выявить недостатки и ошибки.

Категория: CSS; Урок сделан: 01.04.2012; Просмотров : 1061; Рейтинг : 4.0/1;
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Задать вопрос

Вы можете задать свой вопрос, соответствующий тематике сайта.

Задумался?

Задать свой вопрос

Вход


Здравствуйте, Гость!


Copyright © 2010-2016 Pro100uCoz.ru