爲什麼這種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組織的方法更好？

回答

相關問題