什么是好的'标记'CSS样式来定义?

时间:2009-02-15 03:00:57

标签: css css-selectors

我发现定义'{1}}或'hidden'等'标记'css样式非常有用,因此我可以轻松地将某些内容标记为隐藏或选中 - 尤其是在使用基于标记的技术(如ASP.NET)时MVC或PHP。

'selected'

我在这里并不特别感到reinventing the wheel,并想知道其他类似的东西是有用的还是常见的 - 或者是否有任何需要注意的缺陷。

我应该查看其他类似的css框架吗?另外,我可以搜索这种类型的css类的名称。

5 个答案:

答案 0 :(得分:2)

我赞同其他海报,他们只是说你需要什么,而不是用一堆不必要的类来膨胀你的代码。

话虽这么说,我发现自己不断使用以下内容:

  • .accessibility - 可视化隐藏元素,但保持屏幕阅读器和打印样式表的完整性
  • .clear - 与Easy Clearing
  • 相关联
  • .first-child和.last-child - 轻松地将样式分配给容器中的第一个/最后一个项目。这已成为许多次的救星,我更喜欢它而不是支持不良的:伪选择器
  • .replace - 绑定到Phark IR以进行透明图像替换

最后,我使用

动态地将.js分配给<html>元素
<script type="text/javascript">if(h=document.documentElement)h.className+=" js"</script>

这将允许我定义.js (其余选择器)样式,以仅定位启用了JavaScript的浏览器。

答案 1 :(得分:1)

让我给一个非常新手的Web开发人员回答,他最近考虑过将CSS类用作“标记”。请不要将此作为明确的答案,因为我可能完全错了,但请将其视为另一种观点。

我也打算使用一些标记类。我创建了一个名为.center的中心,将元素置于DIV标签中。但是,我很惊讶我认为CSS错了。我推断CSS应该定义如何显示元素而不必更改HTML页面。通过使用标记类,例如.center,如果我希望DIV标记在下个月被右对齐,我将不得不改变CSS和HTML。因此,我创建了一个.latestHeader类(DIV用于保存“最新信息”,例如新闻项),在该类中我将文本设置为对齐中心。现在,当我想更改文本的理由时,我只需更改该DIV的CSS,而不必触及HTML。

答案 2 :(得分:1)

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

我个人总是发现W3C对任何CSS问题都有最复杂但最准确的答案。

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

使用“.center”或“.righths”中的某些内容定义某个标记以使某些内容对齐或右对齐没有任何害处,但请记住,如果您想要更改整块文字你的工作将会增加,因为你必须编辑CSS和HTML。

定义整个部分的格式很可能会更符合逻辑,因为如果你想在路径上更改几个月的部分,你只需要编辑一个CSS声明的格式,而不是编辑每个单独的文章。

然而,CSS被设计为最终的样式语言,可以让管理员使网站看起来完全符合他们的要求。请记住,虽然多余的CSS会增加服务器的负担,但会增加客户端看到页面的时间,并且符合“网页设计的风水”,可能会过火有太多造型。

答案 3 :(得分:1)

你应该在需要的基础上增加这个列表,而不是全面征集一般类的列表 - 你最终只会臃肿。如果您想避免重新发明轮子,请查看一些CSS框架(blueprint960)。在某些方面,像.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}

答案 4 :(得分:0)

我经常发现自己在所有样式表中都保留了两个类:“center”(简单地应用text-align: center;)和一个应用clear:both;的浮动清除类。

我考虑过为我的所有风格添加“重置”语句,但还没有需要它。重置语句与此类似:

*
{
  margin: 0;
  padding: 0;
}

我经常重复使用它们以将它们包含在几乎所有内容中。它们足够小,所以我觉得它们根本没有变得臃肿。