为什么这种css组织方式更好？ [关闭]答案

【问题标题】：Why is this method of css organization better? [closed]为什么这种css组织方式更好？ [关闭]
【发布时间】：2012-01-16 23:59:51
【问题描述】：

我的工作站上的高级开发人员代码如下：

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 代码的不同部分）：

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;
}

像资深开发者那样写css代码有什么好处？

【问题讨论】：

不要把senior误认为better。
我会说你的代码比前辈的要好。您的 css 仅处理您真正想要更改的元素。高年级的可能会格式化非故意的元素。
@alex - 是的，但不要假设在这种情况下高级情况更糟，因为没有真正的性能理由来支持或反对长/短版本。两者都是有效的。如果其他程序员习惯了长格式，那么短的往往会令他们烦恼。在我工作的公司里，我们没有人像一本书一样通读 css。这一切都是通过搜索完成的，因此组织相对无关紧要。
@k_wave - 你确定他不只是指缩进和行使用吗？顶部的看起来像一个基本的 CSS 声明，以跟随重置。不一定是他应用相同的代码。
@KaiQing 如果“烦人”是指“难以阅读和维护”，那么是的 :)

标签： css organized

【解决方案1】：

嗯，他没那么资深……
他在某处读到多余的字符会使页面加载速度变慢，他是对的，但是代码需要可维护且可读。
您应该按照自己的方式编写代码，并在将文件部署到生产环境时使用压缩器清除空格字符的代码。通常这是构建/发布过程的一部分。
那将是高级开发人员会做的事情。

【讨论】：

有趣的是，你拼错了 readable。但我确实同意他可能试图缩小文档。
我不认为他试图缩小文档。我认为内联编写 css 比按字母顺序输入、制表符或重新排序更快。

【解决方案2】：

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

这几乎是个人品味。

【讨论】：

放气会消除任何剩余的尺寸差异...

【解决方案3】：

您的高级开发人员的方法会导致文件大小的字节数存在绝对微小的差异。如果您计划在访问您的网站之前最小化，那将是毫无意义的行为。

但是，当我按照自己的方式使用时，我更喜欢所有在一行的 css，因为我只在需要修改时搜索。

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

【讨论】：

【解决方案4】：

考虑到 CSS 是一种用于网页设计的语言，而 IMO 大部分网页设计都是很好的排版，我认为重要的是要考虑到即使在编写 CSS 时，排版规则仍然适用，并且你还有观众。

有时，假设一个网站将运行 2 年或更长时间，另一位开发人员将不得不在某个时候接触代码。

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

如果我必须使用您发布的第一个代码示例，我会大发雷霆。而且我有很多。

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

CSS 文件的各个部分应由它们所适用的网站部分分隔并加以注释。

然后当然在生产中你想使用如下的缩小器：http://code.google.com/p/minify/

【讨论】：

【解决方案5】：

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

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

#top_orange_bar_content .right {
    float: right;
    margin-right: 40px;
    text-align: right;
    width: 160px;
}

【讨论】：