PreCss. Наследование селекторов в CSS файлах.

Предисловие:
Ввиду ограничения на форматирование текста полная статья лежит здесь: http://precss.far.ru/

Проблема:
1) Не возможность наследования в css значений других селекторов, только полное объявление, например:
.left, right {width: 700}

2) Если селекторы отличаются только в одно свойство, то приходиться разделить определения селекторов и уже в разных определениях изменять необходимое свойства для каждого селектора, причём общая информация дублируется.

.left
{ top:5px;
position:relative;
left:0px;
width: 700px;
}

.re
{ top:5px;
position:relative;
left:0px;
width: 600px;
}

3) При необходимости изменения общих свойств приходиться их менять во всех селекторах:

.left
{ top:10px;
position:relative;
left:0px;
width: 700px;
}

.re
{ top:10px;
position:relative;
left:0px;
width: 600px;
}

Решение проблемы:
Mожно сохранить общую информацию в одни селекторы, а различную в другие, а потом в браузере использовать 2 селектора:

Css файл:

.common

{ top:5px;
position:relative;
left:0px;
}

.left
{ width: 700px;
}

.re
{ width: 600px;
}

В html файле:

…

<div class=”common left”> …

<div class=”common re”> …

Недостатки такого метода:
нет поддержки в старых браузерах (к примеру IE6)
если нужно наследовать много селекторов, то в браузере это принимает некрасивый вид (а главное не удобный). Например:

<div class=”common left rrrr cell dtable”> …

II) А второго способа собственно я не нашел и пришлось решать эту проблему самому (для этого был написан скрипт на PHP, назвал его preCss). К сожалению стандарт css сам по себе не позволяет наследования селекторов css, поэтому стала задача его «расширить», т.е. ввести наследование селекторов.

По сути мною была взята идея из С-шного множественного наследования для классов и прообраз его сделан для css. Пример расширенного css:

.other
{ position: relative;
}

.le extends .other
{ top:1px;
}

.left,.re extends .le
{ left:0px;
}

Еще похожий пример:

.other
{ position: relative;
}

.le
{ top:1px;
}

.left,.re extends .le,.other
{ left:0px;
}

Что мне нужно делать?

Кидаете распаковываете архив preCss в папку с вашими css.
Открываете какой-нибудь css файл. Нужно все общие свойства вынести в отдельный селектор, например:
.common

{ width: 700px;

Height: 20 px;

}

Затем, если хотите чтобы какой-то селектор наследовал общие свойства, то добавляете: «extends ИМЯ_РОДИТЕЛЬСКОГО_СЕЛЕКТОРА».

Пример:
.left extends .comman

{ color: #006600;

}

После отработки preCss селектор .left, будет иметь свойства width, height, а также color.

Как это работает:
А работать это может по 2 схемам:
1) у вас включен mod_rewrite (.htaccess).
Тогда вы обращаетесь к вашим css как обычно, ничего не меняя. А скрипт сам при загрузке браузером css, сделает проверку и конвертнёт css файл в валидную форму.
2)У вас не включен mod_rewrite, тогда обращаться к css файлам нужно так:
Путь_к_css_папке/preCss.php?filename=ИМЯ_ФАЙЛА

Пример:
/template/css/preCss.php?filename=style.css

Полезные фишечки:
В preCss реализована система кэширования css, что позволяет избежать многоразового преобразования css файлов, и следовательно экономятся ресурсы.
Используется header LAST-MODIFIED, что дополнительно позволяет избежать лишней загрузки css-файла.

Скачать preCss – precss.far.ru/precss.zip
Не судите строго, это всего лишь 0.0.1 версия. Жду конструктивной критики и мнений.

BelStudent@yandex.ru