資料：創建可讀性良好的 CSS

你可以通過添加空白字符和注釋來提高樣式表的可讀性。你也可以把不同的選擇器放到一組中來，這樣同一樣式可以應用到這一組中。

空白字符

空白字符是指空格、tab字符和換行。你可以通過添加這些空白字符來提高樣式表的可讀性。

對頁面而言，空白字符也是頁面的一個組成部分，它的效果就是創造了邊距、分割，還有行和列間的空白。

如果你的樣式表中一行只有一條規則，那這是使用空白字符最少的情況。但是，對于復雜的樣式表而言，這可能不便于閱讀，而且維護起來也比較困難。

樣式表的書寫風格可以根據你自己的喜好來選擇。但是，如果你開發的項目需要分享給他人，那就很有必要來制定一些書寫規范。

示例

有人喜歡我們這里使用的緊湊的書寫風格，但是如果規則較長的時候就需要來進行分割：

也有人喜歡下面這種每行只寫一個屬性-值的風格：

還有人喜歡縮進（兩個空格、四個空格，或者tab鍵是最常用的方式）：

還有人喜歡這種垂直對齊的方式（這種方式比較難維護）：

有些人混合使用空白字符來提高可讀性：

而且，在使用的空白字符的時候，有人喜歡用tab鍵，有人喜歡使用空格。

注釋

CSS注釋以/* 開始，以 */結束。

你可以在樣式表中寫些實際意義的注釋，也可以是為了測試的目的而寫的臨時性的注釋內容。

對于樣式表中的注釋內容一定要寫在注釋標簽內，這樣瀏覽器在解析的時候會忽略注釋。一定要注意注釋的起始標簽。樣式表的其他部分始終要符合語法規則。

示例

選取器組

當很多元素具有相同的樣式時，你就需要定義一個選擇器組，組內用逗號分隔。這樣聲明的樣式就會應用到組內所有的選擇器上。

在樣式表的其他地方，你也可以單獨對這些選擇器重新設置樣式，這些樣式會應用到相應的選擇器上。

示例

這條規則將 ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/h1), [, 和 “ 匹配到的元素設置為相同顏色。

將定義顏色的規則寫在一個地方是正確的，因為有些時候，這個顏色值可能需要統一修改。

實踐：添加注釋來提高展現力

編輯你的樣式表，將下面的幾條規則添加進去（規則順序可以任意設置）：

為了讓代碼變得可讀性更高，你需要通過分析其中的聯系來對代碼重新排序，并選擇你認為最合適的方式來添加一些空白字符和注釋。

保存文件并刷新瀏覽器頁面，要確保你更改后代碼不影響原來的顯示效果：

?