您的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中文网其他相关文章！