«Голубушка! Никогда не кладите яйца на серебро, они от этого темнеют».
«Век живи - век учись» — подумал поручик, и переложил портсигар в нагрудный карман.

Управление стилями

Размещение стилей

Несколько правил размещения стилей, которые считаю вполне разумными.

  1. Стиль, использующийся несколькими страницами, должен быть определен во внешнем css файле;
  2. Стиль, использующийся несколькими элементами страницы, должен быть определен в блоке <style> этой страницы. Исключением может быть вынос таких стилей во внешний css файл с целью уменьшения трафика;
  3. Стиль, использующийся только одним элементом страницы, должен быть определен как атрибут style тэга HTML элемента;

Разделение стилей по внешним файлам

Стили могут быть расположенны в нескольких внешних css файлах, в каждом из которых определяются стили некоторой логической части сайта. Это сильно облегчает работу так как, во-первых, уменьшает количество излишней информации, во-вторых, при правильном разбиении стилей по файлам, облегчает поиск необходимых стилей.
Данный подход в ООП называется «модульностью». В качестве примера, свойства HTML элементов, общих для всего сайта rayven.ru вынесены в файл main.css.

Фрагмент файла main.css. Все изображения на сайте по умолчанию — без
границ и отступов.


body, img
{
border-style:none;
margin :0px;
padding :0px;
}

Файл, который предполагается использовать непосредственно страницами, реализуется в виде «сборки» из внешних файлов.

Файл который указывается в качестве внешнего файла стилей для HTML страниц.

@import url("main.css");
@import url("heading.css");
@import url("menu.css");
@import url("page.css");

Можно, конечно, в этом файле определить какие-нибудь стили, но лучше этого не делать. И вот почему.

Отделите агнцев от козлищ

Для устранения жесткой связи между расположением страниц сайта и файлами используемых стилей, можно вместо непосредственного импорта каждой страницей набора файлов стилей, импортировать единственный файл, представляющий собой вышеописанную «сборку» из внешних файлов.

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

Фрагмент файла blang.css

@import url("../style.css");
@import url("script.css");
...

Использование

<html>
<head>
<link href = "../blang.css" type = "text/css" rel = "stylesheet"/>
...

Файл, который импортируют страницы, является чем-то вроде интерфейса стилей. Разделение файлов стилей на используемые страницей и реализующие используемые стили очень похоже на паттерн «bridge».