Несмотря на всю мощь CSS, некоторых вещей мне там все-таки не хватает.
Константы
Очень часто хочется сделать какие-то правило общими для нескольких селекторов. Приходится, либо копировать часть правил из селектора в селектор:
.class1 {
font-size: 0.9em;
color: #FF0000;
position: absolute;
}
.class2 {
font-size: 0.9em;
color: #FF0000;
float: left;
}
Или отдельно описывать общие части:
.class1 {
position: absolute;
}
.class2 {
float: left;
}
.class1,
.class2 {
font-size: 0.9em;
color: #FF0000;
}
Вроде бы неплохо, но не всегда удобно — часто приходится группировать селекторы из разных частей css, в итоге размазывая описание одной сущности.
Или же создавать еще один CSS-класс, содержащий общие части, и добавлять его потом ко всем нужным HTML-элементам, что мне вообще не нравится:
.class1 {
position: absolute;
}
.class2 {
float: left;
}
.class3 {
font-size: 0.9em;
color: #FF0000;
}
Душа же хочет чего-нибудь такого:
$font1 {
font-size: 0.9em;
color: #FF0000;
}
.class1 {
$font;
position: absolute;
}
.class2 {
$font;
float: left;
}
Где-то читал, что что-то подобное поддерживает webkit.
Селекторы, с возможностями похожими на XPath
Часто хочется назначить какие-то правила контейнеру, если внутри контейнера есть какой-нибудь элемент. Например, сделать нижний отступ у контейнера, если внутри контейнера есть изображение (пример надуман, обычно все намного сложнее):
.container[descendant::img] {
margin-bottom: 1em;
}
Мне кажется это гораздо более нужным чем всякие drop shadow и css-анимации.