0

我不是一个网页设计师或程序员，但我似乎遇到了 CSS 类的这个问题：管理共享属性的 CSS 类集的最佳方法是什么？

例如，我目前正在开发一个带有表示文件传输状态的状态栏的应用程序。它用于三个不同的位置，每个位置的大小都不同。此外，如果传输失败，该条应该是不同的颜色。

一般来说，最好的方法是什么：

  1. 将“statusbar”和“transfer-failed”类分别添加到 div 中，并检查它们的组合存在吗？
  2. 拥有“statusbar”和“statusbar-failed”类，适当设置类，并使用谨慎的 CSS 结构以避免重复代码。
  3. 有一个“statusbar”类，然后使用上下文，比如 div 在“summary”表或“transfer-failed”div 中进一步专门化它。

有没有一般规则？方法 3 似乎很脆弱，因为更改看似无关的类的名称可能会破坏一些东西。方法 1 感觉很奇怪，像“失败”这样的类如果没有另一个类就毫无意义，并且在不同的上下文中也可能意味着不同的东西（例如，“失败”也可以应用于失败的表单验证......）方法 2有时会变得笨拙，有很多非常具体的类，名字很长。

4

2 回答 2

1

  1. 如果总是只有一个“状态栏”，请随意使用 an id而不是 a class。

  2. 如果同一页面上有多个，并且它们看起来很 相似，请坚持使用class.

  3. 在适当的时候分配一个transfer-failed班级。在您的 CSS 中，在此类下，应仅具有将其与默认“状态栏”区分开来的属性。就个人而言，我喜欢#3（上下文方法）。WordPress和其他 CSM 将页面名称和类别（以及您想要的任何其他内容）分配为<body> 类。Modernizr使用<html>标签。更多信息在这里： http: //perishablepress.com/dynamic-body-class-id-php-wordpress/

  4. @Lokase的 SMACSS 很棒。有关组织 CSS 的更多提示，请查看：http ://coding.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

于 2012-05-01T13:18:23.680 回答
0

花点时间看一些 CSS 方法或框架，我是SMACSS的粉丝

那里有很多最佳实践的例子，你只需要找到它们并通过学习曲线。

于 2012-05-01T13:06:11.493 回答