如何插入CSS評論

在你的CSS代碼中包含註釋非常有用並且強烈推薦。

每個網站都由結構元素(由HTML指定)以及該網站的視覺風格或“外觀和感覺”組成。 級聯樣式表(CSS)用於規定網站的外觀。 這些樣式與HTML結構保持分離,以便於更新和遵守Web標準。

由於今天很多網站的複雜程度很大,樣式表可能會很快變得非常冗長,並且非常繁瑣。 當您開始為媒體查詢添加響應式網站樣式時,尤其如此。 這些媒體查詢本身可以為CSS文檔添加大量新的樣式,使其更難處理。 這是CSS評論可以在網站上成為寶貴幫助的地方。

將評論添加到網站的CSS文件是為正在審閱文檔的人類閱讀者添加代碼片段結構的好方法。 這也是一種非常棒的方法,可以為將來可能需要在網站上工作的網絡專業人員解釋這些風格 - 包括您自己!

最後,巧妙地添加CSS註釋將使樣式表更易於處理。 這確實對於由團隊編輯的樣式表非常重要。 評論可用於將樣式表的重要方面傳達給不熟悉代碼的不同團隊成員。 這些評論對於那些曾經在網站上工作過的人,如果他們在離開一段時間之後回到代碼中,也會非常有幫助。 我經常不得不編輯一個我創建幾個月甚至幾年前的網站,並在HTML和CSS中格式化好的評論非常受歡迎! 請記住,僅僅因為你建立了一個網站並不意味著你會記得為什麼你做了你在將來返回該網站時所做的事情! 評論可以讓你的意圖在事情發生之前就清除並消除任何誤解。

了解CSS註釋的一點是,當頁面在Web瀏覽器中呈現時,它們不會顯示。 這些評論只是信息性的,就像HTML註釋一樣(儘管兩者的語法不同)。 這些CSS註釋不會以任何方式影響站點的可視化顯示,並且僅存在於代碼本身中。

添加CSS註釋

添加CSS評論非常簡單。 您只需使用正確的開始和結束評論標籤來評論您的評論:

這兩個標籤之間出現的任何內容都將成為評論的內容,僅在代碼中可見,而不會被瀏覽器呈現。

CSS註釋可以是單行,也可以佔多行。 這是一個單行的例子:

div#border_red {border:薄實紅色; } / *紅色邊框示例* /

還有一個多行的例子:

/ *************************** ********************** ******代碼文本的樣式**************************** ************ *************** /

打破節

我經常使用CSS評論的方法之一是將我的樣式表組織成更小,更容易理解的塊。 我希望以後能仔細閱讀這些部分。 要做到這一點,我經常添加帶有大量連字符的註釋,以便在頁面中提供大而明顯的中斷,因為我快速滾動代碼時很容易看到中斷。 這裡是一個例子:

/ * -----------------------標題樣式----------------------- ------- * /

當我在代碼中看到這些註釋中的一個時,我知道這是該文檔新部分的開始,使我可以更輕鬆地處理和使用代碼。

"評論Out" 碼

註釋標籤在編碼和調試頁面的實際過程中也很有用。 可以使用註釋“註釋掉”或“關閉”該代碼的區域,以查看如果該部分不是頁面的一部分會發生什麼情況。

那麼這是如何工作的? 那麼,因為評論標籤告訴瀏覽器忽略它們之間的所有內容,所以你可以使用它們臨時禁用CSS代碼的某些部分。 這在調試時或調整網頁格式時可能非常方便。

要做到這一點,您只需在要開始禁用代碼的位置添加開始註釋標記,然後將結束標記放置在希望禁用部分結束的地方。 這些標籤之間的所有內容都不會影響站點的可視化顯示,允許您調試CSS以查看可能發生問題的位置。 然後,您可以進入並修復該問題並從代碼中刪除註釋。

CSS評論技巧

作為一個回顧,下面是在CSS中使用註釋的一些提示:

  1. 評論可以跨越多行。
  2. 評論可以包含您不想由瀏覽器呈現但不想完全刪除的CSS元素。 這是調試網站樣式表的好方法 - 只要確定在網站上不需要它們,請務必刪除未使用的樣式(而不要將它們留下註釋)
  3. 每當您編寫複雜的CSS時都要使用註釋來添加說明,並通知未來的開發人員或將來您自己應該知道的重要內容。 這將為所有相關人員節省將來的開發時間。
  4. 評論還可以包括元信息,如:
    • 作者
    • 創建日期
    • 版權信息

性能

評論當然可以有幫助,但請注意,您添加到樣式表中的評論越多,它會變得越大,這將影響網站的下載速度和性能。 這是一個真正令人擔憂的問題,但您應該毫不猶豫地添加有用的和合法的評論,因為擔心性能會受到影響。 CSS行不會增加文檔的大小。 您需要添加多行註釋以對CSS文件的大小產生重大影響。 在你的CSS中添加一些有用的評論不應該給你對頁面速度帶來負面影響。

最後,你會希望找到有用的評論和太多的評論之間的平衡,以獲得你的CSS文檔中的好處。

Jennifer Krynin的原創文章。 17/5/17由Jeremy Girard編輯