Question

我一直希望能够在另一个中包含一个样式类。例如

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

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

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

显然这是一个精简的例子，但关键是#message中的所有锚标签都不需要显式类或id。现在我要么在每个需要它的类中复制font-size，要么将类添加到不需要它的东西中。由于我想从一个地方轻松控制字体大小，我通常会开始添加类。

另一个解决方案是在此示例（下面）中拆分“#message a”的定义。这适用于小型项目，但对于较大的项目，这实际上是我最不喜欢的解决方案。如果您将许多类拆分并分散在大型文件中，则会使站点维护变得非常困难。

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

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

所以我的问题分为两部分：1。这会让其他人烦恼吗？ 2.有谁知道这个功能是否正在考虑用于CSS3？

修改：添加html正文的示例和更多详细信息......

重点是在下面的20个锚中添加一个class属性来设置它们的字体大小是很乏味的。

<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来说改变12px到11px。

目前最好的解决方案是将“med-font”类添加到正文中的所有锚点，将“small-font”类添加到页脚中的所有锚点。但我宁愿做我最初展示的内容，只需在“#message a”和“#footer a”的样式中包含所需的字体。

摘要：我希望CSS更加DRY

Answer 1

不，它不会让我烦恼，因为你可以为一个元素使用多个类，并且BOTH会匹配：

.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（或另一个框架）中，您可以添加和删除这些类 - 最常见的是，您将添加“选定”类或可能执行类似突出显示表格单元格的内容，以及当有人单击时切换它，你只需删除“选定”类。优步优雅的IMO。

为了回应您的修改，您只需执行以下操作即可从您的所有A链接中删除CSS：

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

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

＆gt;符号表示“是孩子的”

或者更一般地说（但是这也会直接匹配#message里面的A和更深层次的东西 - 空间意味着“是”的任何后代“）

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

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

Answer 2

这正是Compass框架所擅长的。 Sass允许变量，这使得编码/维护样式表变得非常容易和愉快。

Answer 3

在我看来，你不能这样做的事实是完全可以的，因为你的CSS应该尽可能地保持平稳。关于CSS的最大优势，正如Micheal Kay的XSLT参考（是的xstl ......我知道）中提到的那样，CSS非常简单并且非常容易理解。

我不必看多个地方就知道将一个类放在标签上的样式效果（好吧可能但仍然如此）。

所以对我而言，这对于数字1来说是不可能的。至于2，它已被讨论过，我认为它不会成为标准的一部分。

Answer 4

看看SASS，它可能会做你想要的。它允许嵌套的CSS结构，然后可以将其转换为CSS。我想。

Answer 5

css不是一种编程语言，它从来就没有意义，而且（在这个阶段）永远都不会。在W3C和WHATWG之前，你所谈论的内容已经被讨论了很多次

哦，回答1）它不会惹恼我

Answer 6

不，它不会让我烦恼，IE6让我烦恼：）
这将是一个有用的功能，特别是在css框架中，我们不鼓励我们现在把所有的CSS都集成到一个文件中进行“优化”。我还没有听说过关于css3中有这样一个功能的传闻，但是还有一种方法可以继续使用那个规格，所以谁知道，如果你现在制造了足够的噪音，它就可以实现！

结合风格

6 个答案: