Есть ли причина, по которой CSS не поддерживает применение стилей из стилей? - PullRequest
Новая
       3

Есть ли причина, по которой CSS не поддерживает применение стилей из стилей?

2 голосов
/ 19 января 2010

В CSS2 и даже в готовящемся CSS3 я не могу найти то, что было бы абсолютно естественным и экономило время - применяя стили CSS из других стилей, а не из HTML.

Например: 

.awesome-image {
  border: 1px #000 solid;
  margin: 2px;
}

.super-awesome-image {
  .alwesome-image; // or something like that - this is similar to a function call in a functional language
  padding: 2px; 
}

Часто никто не имеет доступа к сгенерированному HTML, поэтому изменение CSS - единственный выбор.

Такого рода поддержка наследования сделает жизнь намного проще, потому что мы сможем обрабатывать правила CSS как «функции» и повторно использовать код, а не дублировать его.

Или я что-то упустил, и CSS поддерживает это (я никогда не видел это раньше?) Или планирует поддержать это? Просвети меня, пожалуйста.

Редактировать: Рассмотрим другой пример, который показывает, что объявление .awesome-image, .super-awesome-image {common rules} не элегантно: 

.border5 {
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px
}

Я бы предпочел не накапливать все остальные классы, которые хотели бы иметь радиус границы в том же определении. Увы, это то, что нужно делать без функциональной поддержки (я много раз упоминал, что есть доступ только к файлу CSS, а не к самому HTML).

Ответы [ 5 ]

5 голосов
/ 19 января 2010

В CSS это достигается следующим образом: 

.super-awesome-image, .awesome-image {
  border: 1px #000 solid;
  margin: 2px;
}

.super-awesome-image {
  padding: 2px; 
}

Стили могут применяться к нескольким классам одновременно, что позволяет легко наследовать.

Было много споров относительно того, следует ли CSS использовать функциональные методы программирования или наследование слоев, но этот стиль наследования классов, вероятно, останется.

EDIT: Если вы можете создавать стили с помощью php, такое наследование должно быть вполне выполнимым. Проверьте эти сценарии (которые в основном имеют дело с переменными CSS, но могут делать больше):

  1. http://www.shauninman.com/archive/2005/08/05/css_variables
  2. http://www.joesapt.net/2005/09/03/08.46.34
  3. http://interfacelab.com/variables-in-css-via-php/
  4. http://www.conditional -css.com /
4 голосов
/ 19 января 2010
  • Это сделало бы возможной рекурсию (что означало бы, что парсеры должны были бы быть в состоянии восстановить ее)
  • Несколько наборов правил могут использовать один и тот же селектор, так какой из них будет применяться? Или все они?

Вы можете достичь того, чего хотите: 

<img … class="awesome-image super-awesome-image">

или 

.awesome-image,
.super-awesome-image {
  border: 1px #000 solid;
  margin: 2px;
}

.super-awesome-image {
  padding: 2px; 
}
1 голос
/ 19 января 2010

Я думаю, что проблема, о которой вы говорите, действительна, но в тех ситуациях, когда веб-программист полностью отделен от веб-дизайнера, он возлагает бремя на первоначальное управление проектами, чтобы оба они выполняли то, для чего предназначены. Очевидно, что хорошая философия - разделять функцию и стиль, но между ними всегда должна быть какая-то связь, и это делается путем указания внешнего файла (ов) CSS. Вот почему важно тщательно определять Id и Class и всегда учитывать некоторые возможности для изменений, т.е. никогда не делайте свой CSS слишком общим и всегда определяйте ID и Class в HTML для элементов, даже если вы сейчас их не стилизируете. Это тонкая грань, чтобы идти между педантизмом и осторожностью, но тогда попытка думать, что 6 месяцев / 1 год / 5 лет всегда будет;)

Это всегда был мой личный подход.

1 голос
/ 19 января 2010

Это действительно поддерживает то, что вы предлагаете, через Каскад и наследование.Это важные части CSS, которые нужно понять, но иногда они немного необычны ...

0 голосов
/ 09 января 2014

Я думаю, что "mixins" в LESS или SASS делают именно это.

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

Хотя твоя идея звучит хорошо.

...