是否有正確和錯誤的方式來格式化CSS？

當我第一次開始寫CSS，我寫它的擴展形式是否有正確和錯誤的方式來格式化CSS？

div.class { 
    margin:  10px 5px 3px; 
    border:  1px solid #333; 
    font-weight: bold; 
    } 
    .class .subclass { 
     text-align:right; 
     }

但現在我發現自己寫的CSS是這樣的：（實例代碼實際上，我現在寫）

.object1 {} 
    .scrollButton{width:44px;height:135px;} 
     .scrollButton img {padding:51px 0 0 23px;} 
.object2 {width:165px;height:94px;margin:15px 0 0 23px;padding:15px 0 0 10px;background:#fff;} 
    .featuredObject .symbol{line-height:30px; padding-top:6px;} 
    .featuredObject .value {width:90px;} 
     .featuredObject .valueChange {padding:5px 0 0 0;} 
     .featuredObject img {position:absolute;margin:32px 0 0 107px;}

我開始擔心，因爲很多時候我在網上看到第一種形式的示例，而我發現第二種形式更容易處理。它的垂直高度較低，所以我可以用較少的滾動查看所有類，層次結構的列表看起來更加明顯，而且看起來更像是我用javascript或html編寫的代碼。這是一種有效的代碼編寫方式，或者在使用標準時保持聯機狀態，是否應該使用垂直表單？

來源

2010-05-28 DavidR

+1優秀的問題。我從來沒有使用第二種形式，但現在你提到它...另外，人們從文件中剝離CSS評論的是什麼。有時候，headerblock是一種很好的方式來快速瀏覽你正在尋找的東西（或者，我是唯一一個在我的CSS中放置頭文件塊來對常用樣式元素進行分組的人嗎？） – jcolebrand 2010-05-28 17:30:02

我傾向於選擇「以上都不是」給予那些有限的選擇。 – 2010-05-28 18:26:16

我個人比較喜歡第一種風格。我喜歡容易閱讀的東西，我不介意滾動。第二樣式的密集性質減慢我的閱讀，我挑出來，我很感興趣的項目的能力。

當然有，由於文件大小的權衡與CSS考慮。 CSS可以被壓縮。我發現CSS文件的大小是我對迄今爲止建立的網站的擔憂中最小的。

最重要的是，您選擇使用的風格是一致的。當您必須更新CSS或其他開發人員必須更新CSS時，這種一致性將使您的生活更簡單。

來源

2010-05-28 18:05:38

+1的一致性點。我會更進一步，保持各個屬性的一致性順序。（就我個人而言，我的位置，盒子模型，等等，最後是任何專有的。） – 2010-05-28 18:15:21

同上一致，+1也作詳細說明。當然，我認爲這也應該適用於所有編碼領域。 – 2010-05-28 20:11:20

「我不介意滾動」 - 大家難以置信地忽略的是，使用單線方法，您仍然必須水平滾動 - **。國際海事組織認爲，選擇你想要的風格會更加困難和困難。 – DisgruntledGoat 2010-06-01 20:53:27

Well, here is what say the most :)

摘要： css-tricks.com跑了調查。大約3比1的餘量，大多數人喜歡多線超過單行CSS樣式。

來源

2010-05-28 17:29:03 Sarfraz

如果該網站將脫機（可能不是，但你永遠不知道），那麼這個答案是無用的。如果您請引用該來源的一些信息並將其寫入您的答案中，那將非常棒！ :-) – Pindatjuh 2010-05-28 17:56:44

@Pindatjuh：如果這個網站離線，那麼*所有*這裏的答案也將是無用的。所以呢？ – 2010-05-28 20:26:04

如果本網站脫機，那麼至少有各種轉儲文件（每月發佈）以保持答案有用。 – 2010-05-28 20:37:40

我不知道你，但我喜歡開發過程中的垂直模式，因爲它是更容易閱讀我。

然而，在督促，你想壓縮你的CSS來降低負載，因此，第二風格是有道理的。大多數情況下，你會使用一些CSS壓縮器來做到這一點。

來源

2010-05-28 17:30:18 Rajat

無論如何不會將它緩存九次嗎？ – jcolebrand 2010-05-28 17:33:49

我不認爲緩存是不壓縮你的CSS/JS文件的藉口。爲什麼發送額外的空白作爲第一頁加載的有效載荷？此外，它的易於壓縮，有幾個工具可以爲你做。 – Rajat 2010-05-28 17:44:43

縮小/壓縮你的CSS的另一個原因是，你不僅獲得更快的下載時間，還可以更快地瀏覽器執行/解釋你的CSS。 ref：http://code.google.com/speed/page-speed/docs/payload.html#MinifyCSS – Rajat 2010-05-28 17:58:49

我喜歡在多行寫css。因爲這更容易編寫和閱讀。我們可以儘可能早地發現錯誤，並且縮進的效果很好。大多數情況下，當設計師使用css並且給開發人員開發網站時，開發人員可以輕鬆理解。所以我認爲多行css是更好的工作方式。

來源

2010-05-28 17:45:54

使用縮進指示層次結構不是一個壞主意。但是，你應該小心，不要自欺欺人。在你的例子中，你可能會認爲.scrollButton總是在.object1中。但CSS不遵守該規則。如果您使用.object1之外的.scrollButton類，它仍然會獲得樣式。

來源

2010-05-28 18:12:30

好眼睛。（+1） – 2010-05-28 19:06:09

我傾向於第二種風格，但要知道，這是一個風格。以同樣的方式，有些人喜歡

function (arg) 
{ 

    body(); 

}

到

function(arg){ 
    body(); 
}

我不明白這一點，我自己。論點是「閱讀起來更容易」，我的迴應始終是「......爲了你」。作爲說明，我感覺這就是爲什麼這麼多例子使用更多空白版本的原因;它具有較容易閱讀的聲譽（如果不是確認的財產）。

挑一個你喜歡的，並堅持下去。如果你有一個團隊合作，試着去達成共識或者禁止，寫一些自動格式化的腳本，並且避開對方的方式。它不是很難將其中一個機械地轉換成另一個。

來源

2010-05-28 18:14:56 Inaimathi

你寫的風格是你的選擇（我更喜歡多行），但是Rajat說你想在開發之後刪除任何額外的空白。任何時候你都可以減少文件大小和負載，你正在爲你的網站和你的訪問者提供幫助。

來源

2010-05-28 18:35:00 BKCOHEN

我認爲這也取決於你的編輯器。我使用多行格式並使用Vim的摺疊（我設置摺疊標記爲{和}）來壓縮每個定義，因此每行獲得一個標記/類/ id，並在需要時可擴展。

使用註釋來標識「部分」我使用最少的垂直滾動來獲得非常乾淨的外觀，同時保持擴展定義上多行的可讀性。

來源

2010-05-28 18:59:03

我只想指出，Textmate有一個選項，允許您通過選擇一個區域並按下Ctrl-Q/Ctrl-Alt-Q來展開/摺疊，從而輕鬆地在這兩種樣式之間切換。因此，我發現我更喜歡我的CSS崩潰，除非我正在編寫或深入調試特定的部分。但是，通過在兩個人之間輕鬆切換的能力，我發現這兩種方式都適用於不同的情況。

來源

2010-05-28 20:01:05 mVChr

我更喜歡多線直到我們部署。那時我想讓它縮小。

來源

2010-05-28 20:06:54 NotMe

我個人發現你的兩個例子很難讀，特別是第二個。

多行更容易遵循，縮進可能會引起誤解，因爲CSS不一定以這種方式應用。你的縮進可能導致你相信它是。

我寧願多行的基本嘗試和真正的方法，以合理的/邏輯順序：

div.class 
{ 
    margin: 10px 5px 3px; 
    border: 1px solid #333; 
    font-weight: bold; 
} 
.class 
{ 
    text-align: center; 
    margin-left: 10px; 
} 
.class .subclass 
{ 
    text-align:right; 
}

佔用多一點的空間，需要一點點滾動參加，但很容易跟隨。那些擔心優化的人總是可以使用CSS縮小工具來製作CSS文件。

最後只要你是非常與你的工作和整個團隊（如適用）一致，那麼沒有答案是更正確的。

來源

2010-05-28 20:23:41

也許，當你有多個選擇器和一個規則，是這樣的：

#header li a, #header li span { 
    display:inline-block; 
}

所以，我更喜歡做的事：

#header li a, 
#header li span { 
    display:inline-block; 
}

來源

2010-05-28 23:18:12

我一直很喜歡這種風格：

#something1 { 
    color   : #ffffff; 
    background  : #000000; 
} 

#something2 { 
    color   : #000000; 
    background  : #ffffff; 
}

但喲回答你的問題：只要它的功能相同的方式，沒有「適當」或「最佳」的方式來格式化您的代碼。使用你舒適的風格。

來源

2011-06-24 21:31:00 Shaz

是否有正確和錯誤的方式來格式化CSS？

回答

相關問題