您的HTML和CSS評論如何？

>當您開始學習基本HTML或CSS時，通常會學習的一件事就是如何在代碼中寫評論。但是，許多Web開發人員仍然不利用評論來利用他們的優勢。我們可以在HTML和CSS中廣泛使用評論，但是如果正確編寫，則可以真正改善我們的工作流程。

>當您開始在新公司工作時，查看手冊或文檔的許多頁面可能會令人生畏。每個公司都是不同的 - 意味著代碼庫，遺產代碼的數量，框架的開發以及模塊化代碼的數量可能不同。

>我們經常被告知“好的代碼不需要評論”，但是您是否曾經發現自己在圈子裡走來走去，完全丟失了，並且由於評論的

而搜索文檔？ 鑰匙要點

在HTML和CSS中發表評論不僅有助於理解和保持一致性，還可以加快開發過程並有助於有效協作。在多個開發人員正在從事同一項目的團隊環境中，這特別有用。

>

評論是有益的，請避免過度使用它。評論每個代碼的每個塊都可能是多餘的且耗時的。評論應簡潔，僅在代碼不完全清楚的地方使用。
• >
>評論可用於解釋偽元素的目的，嵌套的代碼塊，為什麼！重要的是可能需要的！為什麼要評論代碼塊而不是刪除。
• 其他形式的文檔，例如提交消息和拉動請求，也應被視為開發過程的一部分。它們提供了上下文和清晰度，使協作和代碼審查更加有效。
>
關於代碼註釋的兩個事實

評論被瀏覽器忽略。

>評論在縮小過程中被刪除。

>
>基於這兩個事實，我們知道評論並不是針對機器的意思 - 它們是人類閱讀
2. >
的意思。

為什麼評論代碼很重要

>當您自由職業和從事一個獨奏項目，或者當您是唯一要查看代碼的開發人員時，很容易按照您的方式進行評論，或者您認為合適，或者也許很容易發表評論完全沒有評論。但是很多時候，開發人員說，他們回頭看自己的代碼，想知道“我在想什麼？”或努力理解他們編寫的代碼。

評論可以幫助保持一致性。如果您對所構建的內容有一致的，寫得很好的評論，那麼您每次都更有可能以相同的方式構建東西。

>評論有助於理解。這在一個團隊中確實很重要，有時候一個人沒有完成所有工作。您可以寫評論以幫助自己找出一些邏輯，即使您在項目結束時並沒有保留所有評論，它也可以幫助您更好地了解解決方案的方式。它可以幫助您以後更輕鬆地改進該解決方案。

>

評論還可以幫助進行hotfix或快速修復。評論實際上可以通過三種方式提供幫助。他們可以幫助開發人員了解代碼，如果他們需要快速修復（尤其是在可能會提供幫助的前端團隊之外的開發人員），它可以通過標記需要這些修復程序的位置來提供幫助，並且可以顯示快速修復的位置已應用並需要在某個時候刪除。

>

>評論有助於加快開發過程。如果您包括相關評論，您可以更清楚地了解自己正在創建，更改或刪除的內容。

>評論有助於更有效的協作。如果您知道項目或代碼庫的來龍去脈，那麼您更有可能更快地完成工作和零件，從而改善工作流程。

>

>評論對很多人有所幫助。他們不僅可以幫助自己，而且可以幫助您團隊中的其他人。我們看到評論的日子已經一去不復返了，例如不要在人們的源代碼中竊取我的代碼。雖然我們曾經非常保護我們的代碼，而不想分享我們的“秘密”，但我們現在生活在一個人共享代碼，共同合作並協作的世界中。在網絡項目方面，我們並不為了歸功於哈里·羅伯茨，克里斯·科伊爾或喬納森·斯諾克之類的人而感到羞恥。隨著協作的這種轉變，我們還應該注意我們的評論實踐，並幫助我們的同齡人。

在評論時要避免的一些事情

避免發表所有內容

可能很想養成評論每個代碼塊的習慣，但是這比有用或有用更多餘。只有在某些東西可能不完全清楚的情況下才能進行評論。如果您在命名課時考慮了語義，則代碼可能已經易於理解。 >

>這也可能是“好代碼不需要評論”的概念。評論不應完全避免，而只能在必要時使用。

>

不要太詳細

>我個人對在CSS中寫一些相當長的評論感到內gui，因為我喜歡解釋和記錄事物。但是，您不應該寫小說 - 漫長的評論是閱讀的痛苦，就像寫作一樣。如果您可以簡潔，那就這樣做。有時，當命名CSS課程時，會提供以下建議：

>

>使班級名稱盡可能短，但盡可能長。

>同樣的評論。最好閱讀您寫的任何評論，以確保您自己了解它們。想像一下您是代碼的新手，您正在閱讀評論作為指導。

>

不要花太多時間寫評論

>我曾經在一個項目中看到一個文件，該文件在高層閱讀中有一條線：>

<span>// Update this with how many hours you have spent on this file:
</span><span>// TIME_WASTED = 438;</span>

>您不需要花費大量時間寫評論。幾句話通常就足夠了。如果您花費太多時間嘗試評論您的代碼以確保其他人會理解它，請考慮您的一部分可能實際上需要重構。

>

何時使用註釋

的一些示例

解釋偽元素的目的

此示例顯示了一個偽元素，其中填充了內容值。

>可能無法立即清楚什麼是偽元素的目的，尤其是如果內容屬性顯示為內容：''。在代碼塊上方的簡短評論中，我們可以改進。

<span><span>.post__comment-container::after</span> {
</span>  <span>background-color: #f9f9f9;
</span>  <span>border: 1px solid #dedede;
</span>  <span>border-radius: 0.25em;
</span>  <span>color: #888;
</span>  <span>content: 'Post author';
</span>  <span>display: inline-block;
</span>  <span>font-size: 0.7rem;
</span>  <span>margin-left: 0.5rem;
</span>  <span>padding: 0.2rem 0.45rem;
</span>  <span>vertical-align: middle;
</span><span>}</span>

>

解釋一個嵌套的代碼塊

/* Post author label for comment */

<span><span>.post__comment-container::after</span> {
</span>  <span>background-color: #f9f9f9;
</span>  <span>border: 1px solid #dedede;
</span>  <span>border-radius: 0.25em;
</span>  <span>color: #888;
</span>  <span>content: 'Post author';
</span>  <span>display: inline-block;
</span>  <span>font-size: 0.7rem;
</span>  <span>margin-left: 0.5rem;
</span>  <span>padding: 0.2rem 0.45rem;
</span>  <span>vertical-align: middle;
</span><span>}</span>

雖然肯定有助於盡可能多地使用語義類，但使用預處理器時，為什麼會嵌套CSS的塊：

>

六個單詞足以說明該代碼塊的作用，允許某人可以瀏覽文檔並停止或跳過。

<span><span>.c-segment-controls.is-active</span> {
</span>  <span><span>.c-segment-controls__panel</span> {
</span>    <span>background-color: #fafafa;
</span>    <span>border: 1px solid #aaa;
</span>    <span>opacity: 1;
</span>    <span>transition: opacity 0.5s ease;
</span>  <span>}
</span><span>}</span>

>

解釋原因！可能需要

<span><span>.c-segment-controls.is-active</span> {
</span>
  <span>/* Active state for segment controls panel */
</span>
  <span><span>.c-segment-controls__panel</span> {
</span>    <span>background-color: #fafafa;
</span>    <span>border: 1px solid #aaa;
</span>    <span>opacity: 1;
</span>    <span>transition: opacity 0.5s ease;
</span>  <span>}
</span><span>}</span>

我們經常看到！

>仔細檢查後，我們只是覆蓋了框架的默認行為。

<span><span>.c-accordion-container.ng-hide</span> {
</span>  <span>display: block !important;
</span><span>}</span>

解釋為什麼要評論一個代碼塊而不是簡單地刪除

如果我們查看下面的代碼塊，我們可能會認為刪除這是可以的。當然，它在任何地方都沒有使用？如果我刪除它，那麼它將在稍後需要時，無論如何它都將在版本控件中，對嗎？

/**
 * Overriding some rogue Angular code.
 * Forces `display: block` so that the element can be animated.
 */

<span><span>.c-accordion-container.ng-hide</span> {
</span>  <span>display: block !important;
</span><span>}</span>

>

>，但是如果我們刪除它，那麼首先，有人甚至可能不知道它存在。離開這裡可能是個好主意：

>

<span>// .c-segmented-button__icon {
</span><span>//   transform: translateY(calc((40px - 100%)/2));
</span><span>// }</span>

其他類型的文檔

文檔確實很重要，而不僅限於代碼中的評論。完成任務後，我們可能會對其進行同行評審。

/**
 * Calculation for vertical alignment.
 * Can be used when IE11 support is dropped.
 */

<span>// .c-segmented-button__icon {
</span><span>//   transform: translateY(calc((40px - 100%)/2));
</span><span>// }</span>

>

提交消息

使用版本控件（例如，git）時，我們可以採用有關在代碼中編寫有用評論的知識，並將其應用於我們的提交消息。

不良提交消息不會給出太多上下文。它們看起來草率，很難理解。它們對發行說明無濟於事。開發人員很難知道發生了什麼變化。不好的提交消息通常看起來像這樣。

一個更好的示例將使用動詞描述提交中完成的任務。不同的次要任務將分佈在不同的提交中。

<span>// Update this with how many hours you have spent on this file:
</span><span>// TIME_WASTED = 438;</span>

業力有一個非常簡單的指南，可以寫出更好的提交，而克里斯·比恩斯（Chris Beams）具有非常深入的指南。戴維·德馬里（David DeMaree）甚至寫了一篇題為“犯罪藝術”的文章。提交消息絕對值得關注。

>拉請求

>寫下少量提交後，您通常會為一個同齡人創建拉動請求。我看過一個太多的拉動請求，幾乎沒有細節或根本沒有描述：

>

>當您編寫拉動請求時，通常會希望有人查看您的代碼。為了協助該人並幫助簡化流程，您應該寫下拉斯請求包含的內容的描述。這是我的心理清單：

• >票證號，任務號或發行號
• >用幾個詞提及任務
• >提及我更改了哪些類型的文件
• 如果是一個錯誤，請提及更改之前和之後的錯誤是什麼樣
描述更改後的預期行為（應該是相同的嗎？）
• >
>列出需要採取的任何步驟來檢查更改，無論是在瀏覽器中還是在代碼
• >中
注意應忽略的任何內容，例如另一個分支中解決的錯誤
• 包括接口的屏幕截圖，必要
• 這個示例相對簡單，如果不需要，您絕對不必在上面的列表中包含所有內容：
>

結論

>我提供了一些示例，說明了在哪裡包括評論和一些有關避免的建議，但有關如何在代碼中格式化評論的情況並沒有艱難而快速的規則。行，單詞或包含哪些信息的數量取決於您，也可以在您和您的同行之間決定。只要您保持格式一致，它就會使事情保持整潔，並鼓勵其他人使用該代碼做同樣的事情。

>將評論作為開發過程的一部分有很多好處。養成您認為合適的地方將它們包括在內的習慣是一件好事，尤其是當您有很多人從事相同文件時。它還有助於考慮嵌入在工作流中的其他形式的文檔（例如提交消息和拉請請求），而不僅僅是指南的外部文檔。

您是否遵循任何註釋代碼的準則？或者，也許您在一家擁有不同但有效文檔的公司工作？

>

經常詢問有關HTML和CSS評論的問題（常見問題解答）

>在HTML和CSS中使用註釋的重要性是什麼重要性？首先，它們有助於理解代碼結構和功能，尤其是在團隊中工作或在長時間後重新審視您的代碼時。其次，它們可以在調試期間暫時禁用代碼的某些部分。最後，註釋可以向閱讀代碼的任何人提供有用的信息或說明。

>我如何在HTML和CSS中評論代碼？

。例如，

。在CSS中，通過將文本包裹在 /*和

> /之間來發表評論。例如， /

這是一個評論 * /。 >註釋可以影響我的網站的性能嗎？ 不，註釋不會影響您網站的性能。在渲染過程中，瀏覽器忽略了它們。但是，過多的評論會增加文件大小，這可能會稍微影響加載時間。

>

>在html和css中編寫評論的最佳實踐是什麼？簡潔但描述性，評論代碼的複雜或重要部分，並避免不必要或多餘的評論。定期更新您的評論以反映您的代碼中的更改也是一個好習慣。

>我可以使用註釋從某些瀏覽器中隱藏代碼嗎？

是的，可以使用註釋來隱藏代碼某些瀏覽器。該技術被稱為條件註釋，通常用於為Internet Explorer的不同版本提供不同的樣式或腳本。

>

>我如何使用註釋來調試？

>可以用於調試評論。通過暫時禁用代碼的某些部分。這可以幫助您隔離並識別代碼的有問題的部分。

>我可以在HTML和CSS中嵌套評論嗎？嘗試這樣做可能會導致意外的結果。在CSS中，您可以嵌套註釋，但通常不建議您使用它，因為它可以使您的代碼更難讀取和理解。

>單線和多行註釋之間有什麼區別？ >單行註釋用於簡短的說明或註釋，而多行註釋用於更長的描述或代碼塊。在HTML中，所有評論在技術上都是多行的。在CSS中，單行註釋以//開頭，並在線路結束時結束，而多行註釋以 / *開頭，並以 * /。

結尾，我可以在評論中使用特殊字符嗎？

>

是的，您可以在評論中使用特殊字符。但是，在html中，您應該避免在評論中使用“ - ”字符，因為它們可能會導致評論過早結束。

>

>我如何使用註釋來提高代碼的可讀性？

>註釋可以通過提供解釋和註釋來提高代碼的可讀性。它們還可以用於分離代碼的不同部分，從而更容易導航。但是，重要的是要在評論和過度註釋之間取得平衡。太多的評論可能會使您的代碼變得混亂且難以閱讀。

>

以上是您的HTML和CSS評論如何？的詳細內容。更多資訊請關注PHP中文網其他相關文章！