Переменные в CSS
7 Февраль 2008Давайте помечтаем вместе с Йенсом Майертом (Jens Meiert) о реализации механизма переменных в CSS: CSS: Selector Variables. Суть предложенного решения проста: мы просто задаём псевдоним группе селекторов: @E = F и дальше используем его в коде, избегая лишних повторений.
Типичный код до использования переменных:
.messages-list .highlighted,.messages-list .highlighted LI {overflow:hidden;}.messages-list .highlighted LI .email,.messages-list .highlighted LI .phone {cursor:pointer;}
Теперь объявляем переменные:
@list = .messages-list .highlighted;@list-item = @list LI;
…и получаем:
@list,@list-item {overflow:hidden;}@list-item .email,@list-item .phone {cursor:pointer;}
Кстати говоря, это не единственные мысли на эту тему. Чуть больше месяца назад на форуме Вебмаскона было опубликовано довольно интересное предложение по решению той же проблемы. В нашем случае, часть примера выглядела бы так:
.messages-list {.highlighted {LI {.email,.phone {cursor:pointer;}}}}
…правда становится не очень ясно, куда, при такой форме записи, вставлять правила для вышестоящих селекторов. Видимо, в отдельных конструкциях. Может и у вас есть свои предложения по оптимизации CSS, не противоречащие духу самого языка?
ps: а вот уже черновики возможной спецификации CSS Variables и Symbolic constants
Во втором варианте для вышестоящих селекторов можно было бы использовать что-то вроде
.messages-list {
{
lalala:lalala;
}
.highlighted {
…
}
}
Хотя все-равно первый вариант экономнее, легче для чтения и его можно использовать в разных местах.
на каком-то блоге видел такую мысль, что-то похожее на описание медиатайпов существующих сейчас:
Создаем какой-то класс таким образом:
@article { } допустим это будет блок нашей статьи и все элементы внутри него описываем следующим образом:
@article {
/* свойства самого блока */
border: 1px solid #ccc;
background: #f0f0f0;
/* свойства вложенных в него тегов */
p { margin: 0; padding: 10px; }
a:link, a:active, a:visited { text-decoration: none; }
abbr { border-bottom: none; }
и т.д. и т.п.
}
в отличие от существующего сейчас способа:
.article {
border: 1px solid #ccc;
background: #f0f0f0;
}
.article p { margin: 0; padding: 10px; }
.article a:link, .article a:active, .article a:visited { text-decoration: none; }
.article abbr { border-bottom: none; }
}
Помоему неплохая идея, очень удобно и значительно сокращает код.
Octane, а как тогда обозначать селектор @article в HTML-коде?
kizu, свойство lalala:lalala повисает в воздухе. Имхо, не слишком удачно
Ну да, или же вводить что-то вроде псевдоселектора :self, но это тоже не совсем то.
С переменными удобнее, хотя использование @
(недописал, сглючило %))
…хотя импользование @ странно, т.к. оно уже есть в @media и @import, тогда уж лучше $, который много где переменные означает.
Меня использование собаки немного смущает: всё-таки есть @media, @import…
upd. Хе, ну вот и я говорю :)
>> Octane, а как тогда обозначать селектор @article в HTML-коде?
как класс например, ну или вообще обычным способом через точку писать, иде в том чтобы понимались конструкции такого типа:
.article {
border: 1px solid #ccc;
p { ... }
a:link, a:active, a:visited { ... }
abbr { ... }
}
>> Octane, а как тогда обозначать селектор @article в HTML-коде?
как класс например, ну или вообще обычным способом через точку писать, идея в том, чтобы понимались конструкции такого типа:
.article {
border: 1px solid #ccc;
p { ... }
a:link, a:active, a:visited { ... }
abbr { ... }
}
оффтоп: чот не отправляются комментарии в вордпресс через toonel :(
А кто такой toonel?
Бесплатный прокси для сжатия траффика toonel.net. Хм у меня на вордпрессе работает норм, на этом блоге что-то мешает отправке сообщений.
Бесплатный прокси для сжатия траффика toonel.net. Хм у меня на вордпрессе работает норм, на этом блоге что-то мешает отправке сообщений. 3 раза проверил)
Я склонен подходить к вопросу с другой стороны и в качестве решения проблемы избыточного CSS-кода предпочёл бы наследование единожды определённого набора правил в рамках существующего синтаксиса CSS:
.example {rules: values; } /* селектор (не обязательно класс), от которого будем наследовать */
.another-1 {inherit-from: selector(.example); индивидуальные правила для .another-1; }
.another-2 {inherit-from: selector(.example, ещё какой-нибудь селектор, и ещё); индивидуальные правила для .another-2; }
Внутри функции "selector" через запятую может быть указано несколько селекторов, от которых следует наследовать правила; приоритеты разных значений одинаковых свойств в простейшем случае можно определять в порядке перечисления.
MT, фактически ты предлагаешь ООП: базовый класс и его расширение-уточнение. Согласен — это гибко.
У Йенса и МТ хорошие предложения. Предложить бы w3c и подстегнуть процесс внесения изменений в браузеры.
Вложенность, особенно в виде, предложенном Octane — ужасна для глаз, а с опытом приходит понимание, что как бы то ни было, но программы пишутся прежде всего для людей.
Ну и цитату в дополнение к сказанному:
Programs must be written for people to read, and only incidentally for machines to execute. (Abelson & Sussman)
Уточнения:
Ужасна для глаз - потому, как очегь большой промежуток между открывающей и закрывающей скобкой. Так и потеряться недолго.
Программы = код.
Что-то это все начинает немного напоминать JavaScript =-)
А раз начинает почему бы не писать CSS-функции, которые буду автоматически вызываться по названию классов и айдишников в html-коде?
@ - обозначение функции.
$ - условный оператор if.
@#commentDiv (a, p, strong) {
a(:link,:visited,:hover,:active) {
color:#00F;
}
p {
font-size:1em;
}
strong {
color:#0FF;
}
span {
font-size:1.5em;
}
$a>span {
font-size:1em;
}
}
Думаю дух это не изменит, но чтобы расширить возможности языка - дополнения в синтаксис внести придется.
:D Вас наверное всякие вложенные много раз циклические и условные конструкции на таких языках как JavaScript, PHP, Perl, C++ и д.р. вообще отпугивают?) Если применять форматирование кода (делать отступы напиимер :)) то все прекрасно читаемо) или использовать подсветку синтаксиса...
Оффтопик
Вадим, а ссылочки ранее/позднее чуть ниже формы не перепутаны местами случайно?
«Вложенные много раз циклические и условные конструкции» мне говорят о том, что есть проблемы. Особенно, если вложенность превышает глубину примерно в три уровня.
Есть много способов решать проблемы большой вложенности, и самый первый - это чёткое понимание того, что необходимо сделать. Если такого понимания нет - надо сесть и подумать.
Форматирование кода я использую с окончания школы. С первого курса у меня сложился определённый стиль написания кода. Но при этом я прошёл все этапы - писал ужасный код, похожий на описанный вами, неправильно понимал, что хочу сделать, не думал прежде чем писать код. Время прошло - выводы сделаны и приняты на вооружение. Поэтому я очень хорошо чувствую, где код эстетичен, а где - нет. И ещё лучше чувствую, что никакие подсветки и форматирование не спасут от проблем, если вы будете писать огромные портянки кода с ужасающей вложенностью. Проблемы при этом будут самые простые, например проблемы координации - ведь очень легко забыть, где ты находишься, если не видно начала. Да и поддерживать такое чудовище я и врагу не пожелаю.
Вадим, а почему в комментариях такой маленький отступ перед абзацем? Межстрочный интервал в тексте и в коментариях одинаковый (на глаз), а вот отступ перед абзацем как-то маловат, тяжело для глаза.
czerny_angel, спасибо! Плагин для вывода этих вещей дописывался в 5 утра, так что меня можно понять )
оу :) спать это так приятно.
Про константы в CSS-файлах впервые я прочёл на 24ways.org. Автор говорит, что есть пара решений на PHP. Одно придумал аж сам Шон Инман.
Сам не использую. :-) Ничего не могу сказать.
Вопрос про первый вариант.
Как его правильно реализовать? Просто в цсс написать @list = .messages-list .highlighted; разве достаточно?
Сергей, пока ни один браузер не поддерживает переменные в CSS, более того — даже нет внятной спецификации, только предположения.
Было бы здорово, чтобы в CSS появилось два типа переменных - в одних будут храниться селекторы, а в других - значения свойств.
И если первый тип здесь уже хорошо обсудили, то второй должен выглядеть следующим образом:
$color1 = #345678;
$color2 = #abcdef;
...
#selector1 {color:$color1; background-color:$color2; border:1px solid $color1}
#selector2 {color:$color2; background-color:$color1; border:1px solid $color2}
Мне кажется, что такой подход гибче, чем наследование каких-то параметров из других селекторов, поскольку значение переменной можно использовать в разных правилах (как показано в моем примере)
А еще, как мне кажется, незаслуженно зарубили идею с expression. Все-таки было бы здорово иметь возможность выставить ширину блока 100%-200px.
>> иметь возможность выставить ширину блока 100%-200px.
Если не ошибаюсь, такая возможность будет в спецификации CSS3 без всяких expression и выглядеть будет так:
#conteiner {
width: calc(100% - 200px);
}
такая возможность будет в спецификации CSS3 без всяких expression
Ну, собственно, это и есть expression, только порезанный и называется по-другому. :)
Нормальные браузеры будут поддерживать такой синтаксис, а для ИЕ можно будет писать expression-ы.
Но по-настоящему полезными вычисления будут если в них можно будет использовать вычисляемые размеры других блоков. Что-то вроде:
#container {height:calc(100%-height(#footer));}