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

StackOverflow https://stackoverflow.com/questions/1112601

  •  12-09-2019
  •  | 
  •  

Вопрос

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

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>

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

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

Краткое содержание: Я хочу, чтобы CSS было больше СУХОЙ

Это было полезно?

Решение

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

Другие советы

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

.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 (или в другой среде) вы можете добавлять и удалять эти классы — чаще всего вы добавляете «выбранный» класс или что-то, что может делать что-то вроде выделения ячейки таблицы, и когда кто-то нажимает, выключите его, вы просто удалите «выбранный» класс.Очень элегантный, имхо.

В ответ на ваши правки все, что вам нужно сделать, чтобы удалить 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;
}

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

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top