Question

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

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

但是现在我发现自己写这样的css :(代码我现在正在编写的例子）

.object1 {}
    .scrollButton{width:44px;height:135px;}
        .scrollButton img {padding:51px 0 0 23px;}
.object2 {width:165px;height:94px;margin:15px 0 0 23px;padding:15px 0 0 10px;background:#fff;}
    .featuredObject .symbol{line-height:30px; padding-top:6px;}
    .featuredObject .value {width:90px;}
        .featuredObject .valueChange {padding:5px 0 0 0;}
        .featuredObject img {position:absolute;margin:32px 0 0 107px;}

我开始担心，因为很多时候我在网上看到第一个表单，而我发现第二个表单对我来说更容易。它有一个较低的垂直高度，所以我可以一目了然地看到所有类的滚动较少，层次结构的列表似乎更明显，它看起来更像我用javascript或html编写的代码。这是一种有效的代码处理方式，还是在将代码放在网上时与标准保持一致，我应该使用垂直格式吗？

Answer 1

<强> Well, here is what say the most :)

摘要： css-tricks.com进行了民意调查。大约3比1的边缘，大多数人喜欢多线而不是单线css风格。

Answer 2

我个人更喜欢第一种风格。我喜欢易于阅读的内容，我不介意滚动。第二种风格的密集性使我的阅读速度减慢，我挑选出我感兴趣的项目的能力。

由于文件大小，肯定会考虑使用CSS。 CSS可以压缩。我发现CSS文件的大小对我迄今为止构建的网站的担忧最小。

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

Answer 3

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

Answer 4

我不了解你，但我喜欢开发期间的垂直模式，因为它对我来说更容易阅读。

然而，在prod中，你想压缩你的css以减少有效负载，因此，第二种风格是有道理的。大多数情况下，你会使用一些CSS压缩器来做到这一点。

Answer 5

我喜欢用多行写css。因为这更容易编写和阅读。我们可以尽早找到错误，并且缩进后看起来很漂亮。大多数时候，设计师使用css并给开发人员开发网站比开发人员可以轻松理解。所以我认为多线css是更好的工作方式。

Answer 6

我个人觉得你的两个例子都很难读，尤其是第二个。

多行更容易理解，缩进可能会产生误导，因为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文件。

最后，只要您非常与您的工作和整个团队（如果适用）一致，那么答案就不会更正确。

Answer 7

我更喜欢第二种风格，但要注意它是风格。与某些人喜欢的方式相同

function (arg)
{

   body();

}

到

function(arg){
   body();
}

我不明白，我自己。争论是“它更容易阅读”，我的回答始终是“......为你”。作为一个注释，我感觉这就是为什么这么多的例子使用更多的空白版本的原因;它具有更容易阅读的声誉（如果没有确认属性）。

选择你喜欢的那个并坚持下去。如果你有一个团队合作，试着达成共识，或者禁止这样做，写一些自动格式化脚本并保持彼此的方式。将一个机械转换为另一个并不是非常困难。

Answer 8

你写的风格是你的选择（我更喜欢多行）但是Rajat说你想删除开发后的任何额外的空格。您可以随时减少文件大小和有效负载，从而为您的网站和访问者提供帮助。

Answer 9

我认为这也取决于你的编辑。我使用多行格式化并使用Vim的折叠来缩小每个定义（我将折叠标记设置为{和}）因此我每行得到一个标记/类/ id，在需要时可扩展。

使用注释来识别“部分”我使用最小的垂直滚动得到非常干净的外观，同时保持扩展定义上多行的可读性。

Answer 10

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

Answer 11

在我们部署之前，我更喜欢多线。那时我想缩小它。

Answer 12

也许，当你有多个选择器和一个规则时，如下所示：

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

所以，我更喜欢这样做：

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

Answer 13

我一直很喜欢这种风格：

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

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

但是你回答你的问题：只要它的功能相同，就没有“正确”或“最佳”的方式来格式化你的代码。使用你喜欢的风格。

有没有一种正确和错误的格式化CSS的方法？

13 个答案: