是否有正确和错误的方式来格式化CSS？

当我第一次开始写CSS时，我是以扩展的形式写的

div.class {
    margin:      10px 5px 3px;
    border:      1px solid #333;
    font-weight: bold;
    }
    .class .subclass {
        text-align:right;
        }

但现在我发现自己在写css时是这样的：（我现在正在写的代码示例）

我开始担心，因为很多时候我看到第一种形式是在网上的示例中完成的，而我发现第二种形式对我来说更容易使用。它有一个较低的垂直高度，所以我可以用较少的滚动一眼就能看到所有的类，层次结构的列表看起来更明显，它看起来更像我用javascript或html编写的代码。这是编写代码的有效方法，还是为了在将代码放到网上时遵守标准，我应该使用垂直形式吗？

总结：

---

css-tricks.com进行了一次民意调查。大约3比1的差距，大多数人喜欢多行css样式而不是单行css样式。

我不知道你的情况，但我喜欢开发过程中的垂直模式，因为它对我来说更容易阅读

---

然而，在prod中，您希望压缩css以减少负载，因此，第二种样式是有意义的。大多数情况下，您将使用一些CSS压缩器来完成此操作。

我喜欢用多行编写CSS。因为这更容易写和读。我们可以尽可能早地发现错误，并且使用缩进可以很好地查看视图。大多数情况下，当设计师使用css并将其交给开发人员开发网站时，开发人员很难理解。

---

所以我认为多行css是更好的工作方式。

我个人更喜欢第一种样式。我喜欢易读的东西，我不介意滚动。第二种风格的浓密性降低了我的阅读速度，也降低了我挑选感兴趣项目的能力

当然，由于文件的大小，CSS需要考虑一些折衷。CSS可以被压缩。我发现CSS文件的大小是我迄今为止建立的网站中最不担心的

---

归根结底，重要的是无论你选择哪种风格，都要保持一致。当您必须更新CSS或其他开发人员必须更新CSS时，这种一致性将使您的生活更加简单。

使用缩进表示层次结构不是一个坏主意。然而，你应该小心，不要欺骗自己。在您的示例中，您可能假设.scrollButton始终位于.object1中。但是CSS不遵守这个规则。如果在.object1之外使用.scrollButton类，它仍然可以获得样式。

我更喜欢第二种样式，但请注意它是一种样式。就像有些人喜欢的那样

function (arg)
{

   body();

}

到

我自己不明白。理由是“它更容易阅读”，而我的回答始终是“为了你”。作为说明，我觉得这就是为什么这么多示例使用更多的空白版本；它具有易于阅读的声誉（如果不是经过确认的属性）

---

挑一个你喜欢的，坚持下去。如果你有一个团队需要合作，试着达成共识，或者除非达成共识，否则就写一些自动设置格式的脚本，不要妨碍彼此。机械地将一种字体转换成另一种字体并不是非常困难。

你可以选择你写的字体（我更喜欢多行）但正如Rajat所说，在开发之后，您希望删除任何额外的空白。任何时候，您都可以减少文件大小和负载，这对您的站点和访问者都是一种帮助。

我认为这也取决于您的编辑器。我使用多行格式，并使用Vim的折叠压缩每个定义（我将折叠标记设置为

{

和

}

），因此每行获得一个标记/类/id，可以在需要时进行扩展

---

使用注释识别“部分”我可以通过最小的垂直滚动获得非常清晰的外观，同时保持扩展定义上多行的可读性。

我只想指出，Textmate有一个选项，通过选择一个区域并按Ctrl-Q/Ctrl-Alt-Q展开/折叠，您可以轻松地在这两种样式之间切换。因此，我发现我更喜欢CSS折叠，除非我正在编写或深入调试特定部分。但是，由于能够轻松地在两者之间切换，我发现这两种方法对于不同的环境都很有用。

我更喜欢多行，直到我们部署为止。我个人觉得你的两个例子都很难读，尤其是第二个

多行更容易理解，缩进可能会产生误导，因为CSS不一定以这种方式应用。你的压痕可能会让你相信它是真的

我更喜欢基本的多行测试方法，具有合理/逻辑顺序：

div.class 
{
    margin: 10px 5px 3px;
    border: 1px solid #333;
    font-weight: bold;
}
.class
{
    text-align: center;
    margin-left: 10px;
}
.class .subclass 
{
    text-align:right;
}

占用更多的空间，需要一点滚动，但很容易理解。那些担心优化的人总是可以使用CSS收缩工具来制作CSS文件

---

最后，只要你与你的工作和整个团队（如果适用）非常一致，那么没有比这更正确的答案了。

也许，当你有多个选择器和一条规则时，就像这样：

#header li a, #header li span {
    display:inline-block;
}

因此，我更喜欢做：

#header li a,
#header li span {
    display:inline-block;
}

---

我一直喜欢这种风格：

#something1 {
    color          : #ffffff;
    background     : #000000;
}

#something2 {
    color          : #000000;
    background     : #ffffff;
}

---

但是你要回答你的问题：只要它以同样的方式工作，就没有“适当”或“最佳”的方式来格式化你的代码。使用你喜欢的风格。

+1个很好的问题。我从来没有用过第二种形式，但现在你提到了。。。还有，人们从文件中剥离CSS注释的原因。有时，headerblock是一种快速浏览您正在寻找的内容的好方法（或者我是唯一一个在CSS中放置头块以对常见样式元素进行分组的人吗？）我倾向于选择“以上两种都不是”考虑到这些有限的选择。它不会被缓存九次吗？我不认为缓存是不压缩CSS/JS文件的借口。为什么要为第一页加载发送额外的空白作为有效负载？另外，它非常容易压缩，而且有很多工具可以使用

#header li a,
#header li span {
    display:inline-block;
}

#something1 {
    color          : #ffffff;
    background     : #000000;
}

#something2 {
    color          : #000000;
    background     : #ffffff;
}