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

在我的工作站代码的高级开发人员是这样的：为什么这种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代码的不同部分/重写我的代码）：

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

来源

2012-01-16 Simon Suh

不要搞错*高级*与* *较好。 – alex 2012-01-17 00:02:50

我会说你的代码比老年人好。你的CSS只针对你真正想改变的元素。老年人可能会格式化不具有意义的元素。 – gorootde 2012-01-17 00:04:44

@alex - 真实，但不要以为高级在这种情况下更糟，因为没有真正的性能理由来争论或反对长/短版本。两者都是有效的。如果他们习惯了冗长的形式，那么短的一个往往会让其他程序员感到烦恼。无论如何，在我工作的公司中，我们没有人像书本一样阅读CSS。这一切都是通过搜索完成的，所以组织是相对无关紧要的。 – 2012-01-17 00:07:13

嘛，他也不是那么高级...
他读的地方，多余的字符使网页加载速度较慢，他是对的，但代码需要维护和可读。
您应该按照自己的方式进行编码，并在将文件部署到生产时使用缩小程序清除空白字符代码。通常这是构建/发布过程的一部分。
这将是一个高级开发人员会做的。

来源

2012-01-17 00:03:14

其有趣，你拼错可读。但我确实同意他可能试图缩小文档。 – Kristian 2012-01-17 00:06:36

我不认为他在努力缩小文档。我认为只需内联css就可以快速输入，制表或重新排序，以便于人眼观看。 – 2012-01-17 00:11:20

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

这几乎是个人的品味。

来源

2012-01-17 00:02:09 SpoonNZ

和deflate将删除任何剩余的大小差异... – 2012-01-17 00:09:53

您的高级开发人员的方法会导致文件大小的字节差异很小。如果您打电话给您的网站之前最小化计划，这是毫无意义的行为。

但是，我喜欢所有在一行css时，我有我的方式，因为我只是搜索时，我需要修改。

可读性和组织性是长期列出的唯一理由。

来源

2012-01-17 00:03:13

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

您的方式，但它更可读。只要一个音符 - 当你做这样的这是一个很好的做法，按字母顺序排序甚至更好的可读性，如：

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

来源

2012-01-17 00:06:18

考虑到CSS是网页设计语言和国际海事组织大多数网页设计的是良好的排版，我认为重要的是要考虑即使在编写CSS时，排印规则仍然适用，而且您仍然有观众。

有一段时间，假设一个网站将会长达2年或更长时间，另一个开发者将不得不在某个时候触摸代码。

因此，如果以有意义的方式使用缩进，空格，换行符和标点符号来书写任何东西（书，杂志，博客，CSS代码），将会更加容易。

如果我不得不使用你发布的第一个代码示例，我会把我的头发拉出来。我有很多。

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

CSS文件的各个部分应该按其所应用的网站部分分开和注释。

然后在生产中当然要使用minifier类似如下：http://code.google.com/p/minify/

来源

2012-01-17 00:20:29

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

回答

相关问题