不同的CSS样式

Question

/* Style 1 */
.myclass {
 background:#ff0;
 border:1px solid #ff0
}
#myid {
 width:80px;
 height:80px;
}

/* Style 2 */
.myclass     { background:#ff0; border:1px solid #ff0 }
#myid        { width:80px; height:80px; }

我确信必须有更多用于编写CSS的样式，我想知道它们是什么。是否已经编写了一篇列出所有样式的文章。

由于

Answer 1

这是一个很好的清单和讨论：

http://css-tricks.com/different-ways-to-format-css/

Answer 2

我的回答比你想要的要多，因为我看过一个长达60K的css文件，主要由类和ID覆盖其他文件构成 - 因为没有人知道css是如何工作的。他们只是不断添加东西，直到他们得到他们想要的结果。

.myClass { /* 0,0,1,0 */
  top-margin: 1px;
  padding: 3px;
}

#myid { /* 0,1,0,0 */
 width: 80px;
 height: 80px;
}

在中间重复空格。

现在重要的东西。

1. 评论是选择器的特异性。
2. 应该从文件中的最具体到最具体的顺序排序。
3. 在匹配的特定内容中，它应该是按字母顺序排列的。
4. 每个定义应该只有一个选择器 - 即使你可以放 它们都在同一个选择器中。那样你以后就可以找到它们。而且你的特异性 不要搞砸了。希望您使用的是可以处理的压缩机 正确。
5. 应特别命名类和ID，使其与它们所处的位置相匹配 你的系统。换句话说，www.example.com上的课程可以称为 .table。如果您需要www.example.com/foo /上的新表类，那应该是 命名为.foo-table之类的东西，应该适用并用于事物
   低于它。
6. 所有css应该与您的html文档和所有修改分开 css应该最好通过改变/添加类而不是通过改变特定来完成 元素级别的样式属性。

我是唯一一个以这种方式做到这一点的人，但是之后使用它的每个人都说过，“该死的，这让我很容易找到我的CSS错误！”

Answer 3

确定。我不知道是否有任何文章讨论过这个问题。 但对我来说，样式1在可读性和调试方面更好。

只是我的2美分