Управление стилями
Размещение стилей
Несколько правил размещения стилей, которые считаю вполне разумными.
- Стиль, использующийся несколькими страницами, должен быть определен во внешнем css файле;
- Стиль, использующийся несколькими элементами страницы, должен быть определен в блоке
<style>
этой страницы. Исключением может быть вынос таких стилей во внешний css файл с целью уменьшения трафика; - Стиль, использующийся только одним элементом страницы, должен быть определен как атрибут
style
тэга HTML элемента;
Разделение стилей по внешним файлам
Стили могут быть расположенны в нескольких внешних css файлах, в каждом из которых определяются стили некоторой логической части сайта. Это сильно облегчает работу так как, во-первых, уменьшает количество излишней информации, во-вторых, при правильном разбиении стилей по файлам, облегчает поиск необходимых стилей.
Данный подход в ООП называется «модульностью». В качестве примера, свойства HTML элементов, общих для всего сайта rayven.ru вынесены в файл main.css.
границ и отступов.
body, img
{
border-style | :none; |
margin | :0px; |
padding | :0px; |
}
Файл, который предполагается использовать непосредственно страницами, реализуется в виде «сборки» из внешних файлов.
@import url("main.css");
@import url("heading.css");
@import url("menu.css");
@import url("page.css");
Можно, конечно, в этом файле определить какие-нибудь стили, но лучше этого не делать. И вот почему.
Отделите агнцев от козлищ
Для устранения жесткой связи между расположением страниц сайта и файлами используемых стилей, можно вместо непосредственного импорта каждой страницей набора файлов стилей, импортировать единственный файл, представляющий собой вышеописанную «сборку» из внешних файлов.
В этом случае, если изменится расположение файлов стилей или самих страниц, использующих эти стили, нужно будет исправить URL только в одном файле. Что, в свою очередь, помимо уменьшения ошибок при переносе разделов, позволяет без особых проблем реализовать, например, версионность стилей.
@import url("../style.css");
@import url("script.css");
...
Использование
<html>
<head>
<link href = "../blang.css" type = "text/css" rel = "stylesheet"/>
...
Файл, который импортируют страницы, является чем-то вроде интерфейса стилей. Разделение файлов стилей на используемые страницей и реализующие используемые стили очень похоже на паттерн «bridge».