为什么这种css组织方法更好？

我工作站的一位高级开发人员编写了如下代码：

table {border-collapse: collapse;border-spacing: 0;}
fieldset,img {border: 0;}
address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var {font:inherit;}
del,ins {text-decoration: none;}
li {list-style: none;}
caption,th {text-align: left;}
h1,h2,h3,h4,h5,h6 {font-size: 100%;font-weight: normal;}
q:before,q:after {content: '';}
abbr,acronym {border: 0;font-variant: normal;}
sup{vertical-align: baseline;}
sub{vertical-align: baseline;}
legend {color: #000;}
strong{font-weight:600;}

我像这样编写了相同的代码（在高级开发人员审查/重写我的代码之前，我处理的相同css代码的不同部分）：

---

像高级开发人员那样编写css代码有什么好处？

很少。你会得到一份简短的文件。当通过互联网传输时，它也会少几个字节，但这可以通过CSS预处理器解决

---

这几乎是个人口味。

很少。你会得到一份简短的文件。当通过互联网传输时，它也会少几个字节，但这可以通过CSS预处理器解决

---

这几乎是个人喜好。

您的高级开发人员的方法将导致文件大小的字节差异非常微小。如果你打算在访问你的站点之前最小化，那么这是一个毫无意义的行为

然而，当我按自己的方式使用css时，我更喜欢使用一行css，因为我只需要在需要修改时搜索

---

可读性和组织性是列出它的唯一原因。

您的高级开发人员的方法将导致文件大小的字节差异非常微小。如果你打算在访问你的站点之前最小化，那么这是一个毫无意义的行为

然而，当我按自己的方式使用css时，我更喜欢使用一行css，因为我只需要在需要修改时搜索

---

易读性和条理性是把它列出来的唯一原因。

好吧，他没有那么老……
他在某个地方读到，额外的字符会使页面加载速度变慢，他是对的，但是 代码需要可维护且可读性
在将文件部署到生产环境中时，您应该按照自己的方式编写代码，并使用缩小器清除空白字符的代码。通常这是构建/发布过程的一部分。

---

这将是一个高级开发人员所要做的

嗯，他没有那么高……
他在某个地方读到，额外的字符会使页面加载速度变慢，他是对的，但是 代码需要可维护且可读性
在将文件部署到生产环境中时，您应该按照自己的方式编写代码，并使用缩小器清除空白字符的代码。通常这是构建/发布过程的一部分。

---

这将是一个高级开发人员所要做的

没有真正的优势-只是滚动次数少，更容易找到您需要的规则。当您的CSS文件中有几千行时，这会有所不同

但你的方式更具可读性。只有一个注意事项-当您这样做时，最好按字母顺序排列，即使是为了更好的可读性，例如：

#顶部(橙色)条(内容)右{
浮动：对；
右边距：40px；
文本对齐：右对齐；
宽度：160px；
}

没有真正的优势-只是滚动更少，更容易找到您需要的规则。当您的CSS文件中有几千行时，这会有所不同

但你的方式更具可读性。只有一个注意事项-当您这样做时，最好按字母顺序排列，即使是为了更好的可读性，例如：

#顶部(橙色)条(内容)右{
浮动：对；
右边距：40px；
文本对齐：右对齐；
宽度：160px；
}
考虑到CSS是一种用于网页设计的语言，IMO大部分的网页设计都是好的排版，我认为重要的是，即使在你写CSS时，排版规则仍然适用，你仍然有一个观众。
有时，假设一个站点将运行2年或更长时间，另一个开发人员将不得不在某个时候接触代码

因此，如果以有意义的方式使用缩进、空格、换行符和标点符号，阅读任何内容（书籍、杂志、博客、CSS代码）都会容易得多

如果我必须处理你发布的第一个代码示例，我会毫不犹豫地处理。我有很多

对于具有两个或更少属性的声明，我将使用一行。但对于其他所有内容，我使用了第二个代码示例中的扩展方式。。。在每一个括号结束后，我都会留下换行符。我这样做是为了我自己的理智和其他开发人员将来的可读性

CSS文件的各个部分应该由它们所应用的站点的部分来分隔和注释

当然，在制作过程中，你想使用下面这样的精简器：
考虑到CSS是一种用于网页设计的语言，IMO大部分的网页设计都是好的排版，我认为重要的是，即使在你写CSS时，排版规则仍然适用，你仍然有一个观众。
有时，假设一个站点将运行2年或更长时间，另一个开发人员将不得不在某个时候接触代码
因此，如果以有意义的方式使用缩进、空格、换行符和标点符号，阅读任何内容（书籍、杂志、博客、CSS代码）都会容易得多

如果我必须处理你发布的第一个代码示例，我会毫不犹豫地处理。我有很多

对于具有两个或更少属性的声明，我将使用一行。但对于其他所有内容，我使用了第二个代码示例中的扩展方式。。。在每一个括号结束后，我都会留下换行符。我这样做是为了我自己的理智和其他开发人员将来的可读性

CSS文件的各个部分应该由它们所应用的站点的部分来分隔和注释

当然，在生产过程中，您希望使用如下小型化工具：
不要将高级与更好混淆。我会说您的代码比高级的更好。css只处理您真正想要更改的元素。senior可能会格式化不需要的元素。@alex-true，但不要认为senior在这种情况下更糟糕，因为没有真正的性能理由来支持或反对long/
html {
    background-color: #7e1d32;
    font: 16px/22px arial, sans-serif;
}
#outer_container {
    min-height: 598px;
    width: 100%;
    background: #D4D4D4 url('../images/top_bg.gif') repeat-x top left;
}
#inner_container {
    min-height: 698px;
    width: 100%;
    background: #D4D4D4 url('../images/top_designed_bg.jpg') repeat-x top center;
}

/* top orange banner */
#top_orange_bar {
    height: 47px;
    width: 100%;
    background: transparent url('../images/top_orange_bg.gif') repeat top left;
}
#top_orange_bar_content {
    width: 1026px;
    margin: 0 auto;
}
#top_orange_bar_content .left {
    float: left;
    width: 730px;
    margin-left: 40px;
}
#top_orange_bar_content .left h4 {
    text-transform: uppercase;
    letter-spacing: 1px;
    font: bold 14px/52px arial, sans-serif;
    color: #7f1e32;
}
#top_orange_bar_content .right {
    float: right;
    width: 160px;
    margin-right: 40px;
    text-align: right;
}
#top_orange_bar_content .right a {
    margin-top: 8px;
}