CSS注释 - 如何对CSS进行注释

485 阅读2分钟

注释是任何编程语言的一个组成部分,CSS也不例外。

如果你有一个非常大的项目,或者你在一个团队中工作,那么你就需要通过添加注释来帮助别人更好地理解你的CSS样式表。

由于样式表会随着时间的推移而变得复杂和冗长,在CSS代码中添加注释是你应该遵循的一个有用的惯例。

本文将告诉你如何在CSS中添加内联和多行注释。

如何对CSS进行注释

你只需要一个正斜杠 (/) 和一个星号 (*) 就可以注释掉一行或几行的CSS。但你如何做到这一点呢?

要在CSS中添加内联和多行注释,你可以用正斜线和星号(/*)开始,然后用星号和正斜线(*/)结束注释。

这就是CSS中的内联注释的样子:

/* This is an inline comment in CSS */

这就是多行注释的样子:

/* 
This 
is
a 
multi-line
comment
in 
CSS
*/

你可以注释掉你不想运行的一行或几行CSS:

/* .email-sub {
  padding: 0.2rem;
  border: 1px solid var(--primary-color);
  border-radius: 4px;
}

.email-sub:focus {
  border: 1px solid var(--secondary-color);
  outline: none;
} */

你可以用注释来指定你的网页的某个部分的样式的开始和结束:

/* Hero section starts */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.9rem;
  max-width: 1100px;
  margin: 2rem auto -6rem;
}
/* Hero section ends */

你也可以用注释来为你的CSS添加注释:

/* 
Don't override this style if you don't know what you are doing. Otherwise, CSS might give you a kick in the butt
*/

结论

从长远来看,在你的CSS中添加注释可以帮助你记住你在写代码时做了什么。

此外,如果你以正确的方式添加注释,那么在你已经很久没有看过代码的情况下,就会更容易开始工作。

要了解如何用注释来组织你的CSS,你应该阅读这篇文章