不同的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

我的答案将超出您的期望，因为我看到了一个css文件，该文件长60K，并且主要由类和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美分