1

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

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

4

5 回答 5

6

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

于 2012-01-17T00:03:14.803 回答
3

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

这几乎是个人品味。

于 2012-01-17T00:02:09.693 回答
1

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

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

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

于 2012-01-17T00:03:13.327 回答
1

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

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

#top_orange_bar_content .right {
    float: right;
    margin-right: 40px;
    text-align: right;
    width: 160px;
}
于 2012-01-17T00:06:18.393 回答
1

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

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

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

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

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

CSS 文件的部分应由它们所适用的站点部分分隔和注释。

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

于 2012-01-17T00:20:29.520 回答