Сочетание стилей

Question

Я давно хотел иметь возможность включать один класс стилей в другой. Например

med-font {
  font-size:12px;
}

#message a {
  style: med-font;
  color: blue;
  ...
}

/* lots of other styles, some of which use med-font */

Очевидно, что это упрощенный пример, но ключевой момент заключается в том, что все эти теги привязки в #message не должны нуждаться в явных классах или идентификаторах. Сейчас я либо дублирую размер шрифта в каждом классе, который нуждается в этом, либо добавляю классы к вещам, которые иначе не требовали бы этого. И так как я хочу легко контролировать размер шрифта из одного места, я обычно начинаю добавлять классы.

Другим решением является разделение определения "#message a" в этом примере (ниже). Это работает хорошо для небольших проектов, но для больших проектов это на самом деле мое наименее любимое решение. Это делает обслуживание сайта очень трудным, если у вас много классов, разделенных и разбросанных по большим файлам стилей.

med-font, #message a {
  font-size:12px;
}

#message a {
  color: blue;
  ...
}

Итак, мой вопрос состоит из двух частей: 1. Раздражает ли это других людей? 2. Кто-нибудь знает, рассматривается ли эта функция для CSS3?

Редактировать: Добавление примера HTML-тела и более подробной информации ...

Суть в том, что добавление атрибута класса к 20 указанным ниже привязкам для установки размера шрифта утомительно.

<div id="username" class="med-font">schickb</div>
<div id="message">
  <div id="part1">
    <a href="whatever">text</a>
    <!--lots more tags and say 6 anchors -->
  </div>
  <div id="part2">
    <a href="foo">text</a>
    <!--lots more tags and say 8 anchors -->
  </div>
</div>
<div id="footer"> <!-- footer anchors should be a smaller font-size -->
    <a href="boo">lala</a> 
    <p class="med-font">Company Name</p>
    <!-- other tags and 3 more anchors -->
</div>

Помните, что важная цель - иметь одно место, где объявлен «мед-шрифт», чтобы его было легко настроить. В моем реальном проекте есть стили шрифтов малого, среднего и большого размера. Мне нужно только одно объявление для каждого, чтобы мне не приходилось искать в CSS, чтобы сказать, измените 12px на 11px.

Лучшее решение в настоящее время - добавить класс «med-font» ко всем якорям в теле, а класс «small-font» - ко всем якорям в нижнем колонтитуле. Но я бы предпочел сделать то, что показывал изначально, и просто включить нужный шрифт в стили для "#message a" и "#footer a".

Резюме: Я хочу, чтобы CSS был больше DRY

Answer 1

Нет, это не раздражает меня, потому что вы можете использовать несколько классов для элемента, и ОБА будет соответствовать:

.idiot {
   color:pink;
   text-decoration:underline;
}

.annoying {
   font-weight:bold;
}

/* and if you want to get REALLY specific... */
.annoying.idiot {
   background-image('ann.jpg');
}
...

<div class="annoying idiot">
   Ann Coulter
</div>

Лично я считаю, что это гораздо более универсальное решение проблемы. Например, в jQuery (или в другом фреймворке) вы можете добавлять и удалять эти классы - чаще всего вы добавляете «выбранный» класс или что-то, что может делать что-то вроде выделения ячейки таблицы, и когда кто-то нажимает на отключить его, вы просто удалите "выбранный" класс. Uber-элегантный ИМО.

В ответ на ваши изменения, все, что вам нужно сделать, чтобы удалить CSS из всех ваших ссылок A, это сделать что-то вроде этого:

#message > div > a {
   font-size:12px;
}

#footer > a {
    font-size:10px;
}

Где символ> означает «дитя»

или, в более общем смысле (но это также соответствует A непосредственно внутри #message и чему-либо более глубокому - пробел означает «любой потомок»)

#message a {
   font-size:12px;
}

#footer a {
    font-size:10px;
}

Answer 2

Это как раз то, в чем хорош фреймворк Compass . Sass допускает переменные, что делает кодирование / ведение таблиц стилей очень простым и приятным.

Answer 3

Посмотрите на SASS, который может делать то, что вы хотите. Это позволяет использовать вложенные структуры CSS, которые затем можно преобразовать в CSS. Я думаю.

Answer 4

По моему мнению, тот факт, что вы не можете этого сделать, вполне подходит, потому что ваш CSS должен оставаться максимально простым. Одним из величайших преимуществ CSS, как упомянуто в справочнике Micheal Kay по XSLT (да, xstl ... я знаю), является то, что CSS очень прост и невероятно прост для понимания.

Мне не нужно смотреть на несколько мест, чтобы узнать стилистические эффекты наложения класса на тег (ну, может быть, но все же).

Так что для меня это будет "нет" для номера 1. А что касается 2, это обсуждалось, и я не думаю, что это будет частью стандарта.

Answer 5

1. Нет, меня это не раздражает, IE6 раздражает меня:)

2. Было бы полезно иметь эту возможность, особенно в среде CSS, однако мы не поощряем объединять все наши CSS в один файл для «оптимизации». Я не слышал никаких слухов о такой функции в css3, но есть еще способ использовать эту спецификацию, так что, кто знает, может быть, если вы сделаете достаточно шума сейчас!

Answer 6

css не является языком программирования, он никогда не был и не будет (на данном этапе). то, о чем вы говорите, уже много раз обсуждалось в W3C и WHATWG

о, и ответить 1) меня это не раздражает