2

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

.hidden
{
    display:none;
}

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

我并不特别想在这里重新发明轮子，并想知道其他类似的东西是有用的还是常见的——或者是否有任何需要注意的陷阱。

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

4

5 回答 5

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 的浏览器。

于 2009-02-15T20:11:19.123 回答
1

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

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

于 2009-02-15T03:56:24.160 回答
1

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

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

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

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

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

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

于 2009-02-15T04:04:05.593 回答
1

你真的应该根据需要增加这个列表，而不是一刀切地征求通用类的列表——你最终只会变得臃肿。如果您想避免重新发明轮子，请查看一些 CSS 框架（蓝图或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}
于 2009-02-15T04:37:13.093 回答
0

我经常发现自己在我的所有样式表中都保留了两个类：“center”（它只是简单地应用text-align: center;，以及一个浮动清除类）clear:both;。

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

*
{
  margin: 0;
  padding: 0;
}

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

于 2009-04-18T18:33:17.670 回答