Question

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

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代码有什么好处？

Answer 1

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

Answer 2

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

这是个人品味。

Answer 3

您的高级开发人员的方法会导致文件大小的字节差异非常小。如果您计划在呼叫您的网站之前尽量减少，那么这是一种毫无意义的行为。

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

可读性和组织是将其列出很长时间的唯一理由。

Answer 4

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

然而你的方式更具可读性。只需要注意一点 - 当你这样做时，为了更好的可读性，按字母顺序排序是一个好习惯，例如：

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

Answer 5

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

在某个时间，假设一个网站将持续2年或更长时间，另一个开发人员将不得不在某个时候触摸代码。

如果它以有意义的方式用缩进，空格，换行符和标点符号编写，那么阅读任何（书籍，杂志，博客，CSS代码）会更容易。

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

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

CSS文件的各个部分应该由它们适用的网站部分和注释分开。

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

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

5 个答案: