Какой бы не был сайт – огромный или совсем маленький, все они содержат файлы со стилями CSS, которые часто перегружены не нужными элементами или длинными цепями зависимости друг от друга селекторов. Есть ли какие-то стандартные правила создания стилей оформления?
Правильная структура стилей CSS сулит не только хорошее их понимание, но и высокую стойкость к большим нагрузкам. Чтобы этого добиться, нужно соблюдать два принципа – это, во-первых, использование базовых правил для создания эффективных стилей сайта. Во-вторых – применение различных подходов, способов для структуры кода и вывод таблиц стилей на более высокий уровень.
Прежде чем перейди к оформлению страницы сайта, необходимо создать HTML-код, да не простой, а хорошо читаемый код. Вот с именно этого, пожалуй, и начнем.
Хорошо читаемый HTML-код всегда радует не только веб-мастера но и обычного пользователя, хотя ему на экране предоставляется уже готовый результат. Почему? Ответ на этот вопрос предоставлю в примере, с которого все станет ясным. И так, HTML-код страницы с внутри:
<body>
<div id=»header»>
<h1>Website Title</h1>
<ul id=»navigation»>
<li><a href=
http://darkghost.pp.ua/»#»>Home</a></li>
<li><a href=
http://darkghost.pp.ua/»#»>About</a></li>
<li><a href=
http://darkghost.pp.ua/»#»>Contact</a></li>
</ul>
</div>
<div id=»footer»><p>standard copyright and footer information</p></div>
</body>
Как Вам такая структура HTML-кода, нравиться? Хотя код страницы верно написан, но вот что-то отыскать в нем, будет тяжело, поскольку все сливается в единое целое. Попытаемся это исправить следующим образом:
<body>
<div id=»header»>
<h1>Website Title</h1>
<ul id=»navigation»>
<li><a href=
http://darkghost.pp.ua/»#»>Home</a></li>
<li><a href=
http://darkghost.pp.ua/»#»>About</a></li>
<li><a href=
http://darkghost.pp.ua/»#»>Contact</a></li>
</ul>
</div> <!— end #header —>
<div id=»footer»>
<p>standard copyright and footer information</p>
</div>
<!— end # footer —>
</body>
Теперь самое время перейти к оформлению стилей страницы. Одновременно с созданием HTML-кода, в отдельном файле делаем небольшие заметки, которые в будущем превратятся в таблицу стилей. Например,
/* Содержание
— Стили ссылок
— Стили для разных размеров экранов
— Действия
— Основной макет
— Лого
— Верхняя навигация
— Боковая навигация
— Поднавигация
*/
…
(а у каждой отдельной секции…)
/* Верхняя навигация */
/* Верхняя навигация */ — такое выражение является
аннотацией
, которая некоторым может показаться излишеством, но такой «маркер» помогает быстро и без особых трудностей отыскать нужную часть кода. Аналогичный маркер так же можно использовать и в HTML-коде страницы, например, как можно увидеть выше — <!— end # footer —>
Но вернемся к стилю страницы. Свойства отдельных элементов страницы желательно задавать в алфавитном порядке, например
.login {
border-left: 1px solid #69824d;
float: right;
font-weight: bold;
line-height: 1.5em;
list-style-type: none;
margin-top: 5px;
padding-left: 5px;
width: 80px;
}
Как видите, каждое свойство объекта страницы записано с новой строки с небольшим отступом – такой прием также влияет на скорость поиска необходимой строки для редактирования положения или его ширины.
И на последок, самое главное. Стараемся составлять таблицу стилей кратко и просто. Так, длинные селекторы вынуждают браузер несколько раз проходить по DOM-у, чтобы еще раз сравнить полученные данные и убедиться, что ничего не пропустил. Для устранения этого процесса старайтесь кратко и лаконично указывать селектор(ы). Например, такая запись
div#wrapper div#maincontent div#sidebar {
background: #fff url(bg.png) repeat-x 0 0;
border: 1px solid #ff0;
…
}
будет ошибочной. Правильнее будет ее записать в таком виде:
#sidebar {
background: #fff url(bg.png) repeat-x 0 0;
border: 1px solid #ff0;
…
}
В очередной раз, хотелось бы вспомнить пословицу: «Краткость, сестра таланта». Именно краткость играет большую роль и служит хорошей чертой в создании Интернет-ресурсов. Минимум кода способствует более высокой эффективной работы сайта.