CSS爲什麼在規則之前添加空格？

CSS代碼格式化的問題：我有增加空單的老習慣了{啓動一個新的CSS規則之前，像這樣：CSS爲什麼在規則之前添加空格？

body { 
    font-size: 16px 
}

這樣一個body和{之間的空格整個CSS加起來。

理想的情況下，我寧願寫我的規則，像這樣（因此節省空格）：

body{ 
    font-size: 16px 
}

其實，我忘了我爲什麼這樣做呢？

請注意，我故意簡化了這裏的例子來顯示空格。當然，沒有必要從文件中刪除這裏的空間。但是在2-3,000條規則的現實生活中，它可能會加起來。另外，我認爲與那個被刪除的情況相比，那個位置上的單個空白會嚴重壓縮。

我早就忘記了爲什麼要添加那些奇怪的空格。移除安全嗎？哪個瀏覽器需要空格？

來源

2009-12-03 Jesper Rønn-Jensen

您可能會添加空間，因爲它讀取/看起來更好。

安全刪除，瀏覽器不關心這些空間。任何CSS壓縮器/優化器將刪除所有這些空間，換行符等。

現在很少有人手工優化他們的css，我的建議是讓你的css可讀和可保留，然後使用壓縮器/優化器如YUI 。

http://developer.yahoo.com/yui/compressor/

來源

2009-12-03 22:56:32 rjlopes

感謝您的回答。實際上，我已經在這個項目上直接使用YUI壓縮器，並且注意到它刪除了特定的空白。 – 2009-12-04 13:15:30

刪除它是非常安全的。如果你縮小了你的CSS，那麼它將會把它們刪除，並且它會減少你的CSS，因爲它使用更少的帶寬來移動CSS。

來源

2009-12-03 22:50:52 AutomatedTester

安全，也許但不可讀。少數備用字節不值得您的代碼的可讀性和可維護性。 – 2009-12-03 23:02:39

問題是否安全？是的，事物之間的空間不會對可讀性產生影響。如果你打算讓人們失望，那麼就去做一行一行的人吧！ – AutomatedTester 2009-12-03 23:05:51

CSS像大多數編程語言一樣跳過任何空格。規則和左括號之間的額外空間使得閱讀起來更容易。個人而言body{看起來很醜。

如何在CSS中使用空格由你決定，但它有助於使其可讀。

你寧願這樣：

body{ 
text-align:center; 
font-size:10pt; 
}

或那樣嗎？

body { 
    text-align: center; 
    font-size: 10pt; 
}

來源

2009-12-03 22:51:11

有些人用css節省空間會把規則放在一行上。這樣可以節省更多空間，因爲您沒有新的換行符，並且它仍然非常易讀。

body { font-size: 16px; font-weight: bold; }

由於CSS是大多數網站上的緩存，即使2-3000線是不會給你節省大量的空間，並且業績增長很可能將是微不足道的反正。

編輯：改變了大多數人對一些人。

來源

2009-12-03 22:52:11 Deeksy

你不能指望緩存，但我同意額外的大小可能可以忽略不計。 – Joel 2009-12-03 22:55:04

不知道「大多數人」..從我可以告訴，它的相當分裂。 – 2009-12-03 22:55:52

我同意，「大多數人」都很漂亮。 – Deeksy 2009-12-03 23:27:39

是的，你可以刪除空格，實際上如果你真的想保存字節，你也可以刪除「font-size：16px」中的空格。

話雖如此，大多數服務器和瀏覽器gzip網絡上的內容無論如何，所以實際節省空間將是最小的，可能不值得在可讀性方面的成本。

來源

2009-12-03 22:52:54 Nick

body {

看起來更好看（至少我是這麼認爲的）。

不要考慮保存幾個字節，不管你如何格式化你的代碼，你應該在部署它之前通過css compression utility運行它。根據您的開發環境，您可能會自動執行此任務。

你也應該配置你的http服務器使用css的gzip壓縮（這會比正文和{）之間的空白多節省很多。

來源

2009-12-03 22:53:04 Kimble

互聯網連接快速。殺死你的是延遲時間，有時候是幾秒鐘，而服務器正在等待你的回覆通過網絡。實際的文件傳輸只佔用了總時間的一小部分。

鑑於一個體面的服務器設置也會發送gzip的css文件，我認爲在考慮到所有其他開銷時，我認爲它在更大的方案中會有很大的差異。我會堅持任何最好的。

如果CSS文件確實達到了你認爲這會產生影響的程度 - 正如另一張海報所說的那樣 - 縮小是前進的方向。不要忘記換行符或製表符佔用太多空間。

來源

2009-12-03 22:57:09 Meep3D

我真的喜歡第三種選擇：

class 
{ 
    ... 
}

我覺得在你有適用於幾類，像這樣的風格的情況下更具可讀性：

classA, 
classB, 
classC 
{ 
    ... 
}

，但當然，最終都是關於個人偏好。以易於閱讀，理解和維護的方式編寫代碼，並使用縮小器/壓縮器優化生產環境的性能。

來源

2009-12-03 23:12:19

我最喜歡的格式是像這樣：

body{ margin:0; 
     font-family:Verdana, Tahoma, Arial, sans-serif; 
     padding:0;}

它只是似乎愚蠢的我只爲最後的「}」字符創建一個新行。它對我來說仍然看起來足夠可讀，但缺點是沒有多少嘗試自動格式化CSS的CSS編輯器會這樣做。我通常不得不關閉CSS自動格式化或手動將其分開。

來源

2009-12-03 23:33:50 jamauss

，如果你擔心不必要空間的CSS文件中的貢獻下載大容量的數字，你可能有其他問題，醞釀在其他地方..

個人而言，我總是去可讀性在擔心這些事情八九不離十。我喜歡空間我自己

來源

2009-12-04 00:03:11

嗯，我個人不會在CSS上使用空白區域，我不覺得很難閱讀，這只是一個習慣它的問題！

來源

2009-12-04 03:21:08 Evilalan

CSS爲什麼在規則之前添加空格？

回答

相關問題