定义什么好的“标记”css样式？答案

【问题标题】：What are good 'marker' css styles to define?定义什么好的“标记”css样式？
【发布时间】：2010-10-07 16:56:00
【问题描述】：

我发现定义“标记”css 样式（例如'hidden' 或'selected'）很有用，因此我可以轻松地将某些内容标记为隐藏或选中——尤其是在使用基于标签的技术（如 ASP.NET MVC 或 PHP）时。

.hidden
{
    display:none;
}

.newsItemList li.selected
{
    background-color: yellow;
}

我并不特别喜欢reinventing the wheel，我想知道还有哪些其他类似的东西有用或常见——或者是否有任何需要注意的陷阱。

我应该查看任何特定的 css 框架来处理其他类似的事情吗？另外有没有我可以搜索的这种类型的 css 类的名称。

【问题讨论】：

fwiw "removed" > "hidden" 因为 hidden 在 CSS 中具有预先存在的含义，即可见性
我将 CSS 标记类用于 jQuery 动画之类的选择器，尤其是当我希望多个元素同时制作动画时。

标签： css css-selectors

【解决方案1】：

我经常发现自己在所有样式表中保留了两个类：“center”（仅适用于 text-align: center;，以及一个适用于 clear:both; 的浮动清除类。

我考虑过为我的所有样式添加“重置”语句，但还没有需要。重置语句将类似于以下内容：

*
{
  margin: 0;
  padding: 0;
}

我经常重复使用它们以将它们包含在几乎所有内容中。它们足够小，所以我觉得它们根本不会使代码膨胀。

【讨论】：

【解决方案2】：

我同意其他发帖人的观点，他们说只定义你需要的东西，而不是用一堆不必要的类来膨胀你的代码。

话虽如此，我发现自己经常使用以下内容：

.accessibility - 视觉上隐藏元素，但为屏幕阅读器和打印样式表保持完整
.clear - 绑定到Easy Clearing
.first-child 和 .last-child - 轻松地将样式分配给容器中的第一个/最后一个项目。这已经多次成为救命稻草，我更喜欢它而不是支持不佳的 :pseudo 选择器
.replace - 绑定到 Phark IR 用于透明图像替换

最后，我将.js 动态分配给<html> 元素

<script type="text/javascript">if(h=document.documentElement)h.className+=" js"</script>

这将允许我定义 .js （选择器的其余部分） 样式以仅针对启用了 JavaScript 的浏览器。

【讨论】：

如果您也可以将overflow:auto 添加到包含浮点数的元素中，为什么还要.clear？甚至 2009 年的伪类支持也很好。

【解决方案3】：

您确实应该根据需要增加此列表，而不是一刀切地征求通用类的列表——您最终只会变得臃肿。如果您想避免重新发明轮子，请查看一些 CSS 框架（blueprint 或 960）。在某些方面，像 .center { text-align:center } 这样的通用类确实有一定程度的冗余，但通常需要它们。例如，以下模式太常见但应该避免：

element.onclick(function(e){ this.style.backgroundColor = 'yellow' }

这很糟糕，因为你真的应该使用：

element.onclick(function(e){ this.className = 'highlight' }

后者允许您仅通过触摸 CSS 文件来修改样式。但是，如果一个 CSS 类名只有一个样式元素，那么您可能应该避免使用它，因为拥有它没有任何意义（在您的示例中为 .hidden）并直接调用它：

element.onclick(function(e){ this.display = 'hidden}

【讨论】：

是的，但由于一个元素可以有多个类，我可以有效地使用 jQuery 的 addClass() 或 removeClass() 来添加或隐藏某些内容。在开发/调试过程中的某些情况下，我可能希望将“隐藏”更改为不透明度 20%，这样我就可以看到所有隐藏的面板
也绝对是避免臃肿的一个好点 - 我只是希望通过查看其他人之前的想法来了解更多信息 - 我相信会有一些值得提前知道的聪明的东西：- )

【解决方案4】：

关于您关于 CSS 框架的问题...

就我个人而言，我一直认为W3C 对任何 CSS 问题都有最复杂但也最准确的答案。

经过多年的编程和使用 CSS/HTML/PHP，我同意上述评论。

使用沿 '.center' 或 '.righths' 的线条定义要居中或右对齐的标记是没有害处的，但请记住，如果您想更改由于您必须同时编辑 CSS 和 HTML，因此您的工作量将会增加。

定义整个部分的格式很可能会更合乎逻辑，因为如果您想在几个月后更改部分，您只需编辑一个 CSS 声明的格式，而不是编辑每篇文章。

然而，CSS 被设计为最终的样式语言，它可以让管理员使网站看起来完全符合他们的要求。请记住，尽管过多的 CSS 会增加服务器的负载，会增加您的客户看到您的页面之前的时间，并且符合“网页设计的风水”，但可能会过火样式过多。

【讨论】：

【解决方案5】：

让我给你一个来自最近考虑使用 CSS 类作为“标记”的非常新手的 Web 开发人员的答案。请不要把这当作一个确定的答案，因为我可能完全错了，但请从另一个角度看待它。

我也打算使用一些标记类。我创建了一个名为 .center 的文件，以将 DIV 标签中的元素居中。但是，我对我看 CSS 完全错误的想法感到震惊。我推断 CSS 应该定义元素的显示方式，而无需更改 HTML 页面。通过使用标记类，例如 .center，如果我希望 DIV 标记在下个月右对齐，我将不得不同时更改 CSS 和 HTML。因此，我创建了一个 .latestHeader 类（DIV 用于保存“最新信息”，例如新闻项目），并在该类中将文本设置为居中对齐。现在，当我想更改文本的对齐方式时，我只需更改该 DIV 的 CSS，而不必触摸 HTML。

【讨论】：

这或多或少应该是这样看待的 - 使用 HTML 标记文档的语义，使用类来指示其他语义，并使用应用在其中的 CSS 来引导到实际的视觉效果表示该含义。
@hardcode 这正是我的问题背后的问题。我正在尝试找出此类标记类的适当范围。我认为“隐藏”类和“选定”类有很多价值，因为在生成我的 HTML 时我不想放入 display:none。
@hardcode 当然'.center'实际上更像是说'.red'而不是说'.hidden'。如果它隐藏了它的隐藏并且总是想要被隐藏（除了打印 css 或 ipod css）。但如果它是红色的，你下次可能希望它是栗色的。
@Simon：在这种情况下，您当然可以争辩说“selected”是一个语义上有意义的值；因此，可能是“隐藏的”，因此它们可能是可以接受的。没有任何硬性规定，没有人会为此开枪，但请注意未来的可维护性。
@rob 你还能想到其他人吗？显然，我可以在遇到它们时添加它们，但我只是第一次尝试真正将 css 钉在头上 - 到目前为止，我对它的使用几乎都是蛮力