css注释_CSS注释

css注释

Every programming language lets you add notes and other hints that help you understand what’s going on. Not all CSS is as understandable at first glance as, say, something like font-size: 20px, so some sections of code can benefit from adding notes or other hints in their vicinity. Here’s an example:

每种编程语言都可以添加注释和其他提示，以帮助您了解发生了什么。 乍一看，并不是所有CSS都像font-size: 20px这样的东西可以理解，因此某些代码段可以通过在其附近添加注释或其他提示而受益。 这是一个例子：

.cf {
  zoom: 1; /* for IE6 and IE7 */
}

The comment in this line of code is the part that says “for IE6 and IE7,” and is identifiable as such by the preceding backslash followed by an asterisk, and the asterisk and backslash at the end.

此代码行中的注释是“针对IE6和IE7”的部分，并且可以通过前面的反斜杠后跟一个星号以及最后的星号和反斜杠来识别。

We can add as many of these to our stylesheet as we like, and it’s good practice to use CSS comments to help identify parts of any stylesheet that might be difficult to understand from a cursory glance. By using CSS comments to make our stylesheets more readable, the CSS will be easier to maintain in the future.

我们可以根据需要在样式表中添加尽可能多的样式，并且使用CSS注释来帮助识别任何样式表的部分(可能一眼就很难理解)是一种很好的做法。 通过使用CSS注释使我们的样式表更具可读性，将来CSS将会更易于维护。

A CSS comment can span multiple lines if required. Everything that’s in between the opening and closing comment characters will be ignored by the browser, and so will the comment characters themselves. So often you’ll see something like this in a CSS file:

如果需要，CSS注释可以跨越多行。 浏览器将忽略开头和结尾注释字符之间的所有内容，注释字符本身也将被忽略。 因此，通常您会在CSS文件中看到类似以下内容的内容：

/***************************
****************************
These are the styles for
the header section
****************************
***************************/

Notice that, in this example, not only have I included the opening and closing asterisk and backslash characters, but I’ve also added some extra asterisk characters spanning multiple lines. This makes the comment easy to find when scrolling through the CSS file. Add section headings like this in CSS to help organize it into readable, related chunks of code.

请注意，在此示例中，我不仅添加了开始和结束星号和反斜杠字符，而且还添加了一些额外的跨多行的星号字符。 这使得在滚动CSS文件时易于找到注释。 在CSS中添加这样的章节标题，以帮助将其组织为可读的相关代码块。

Unfortunately, CSS doesn’t have an easy way to present a valid, single-line comment that uses just an opening comment character combo. For example, in JavaScript, you can comment out a single line of code like this:

不幸的是，CSS没有一种简单的方法来呈现仅使用开头注释字符组合的有效的单行注释。 例如，在JavaScript中，您可以这样注释掉一行代码：

// This is a JavaScript comment

This is helpful in JavaScript because it makes it easy to nullify an entire line of code, or add a helpful comment, with just two characters (the backslashes). But in CSS it’s necessary to use both the opening and closing characters to specify the boundaries of any comments.

这在JavaScript中很有用，因为它使仅用两个字符(反斜杠)就可以轻松地使整行代码无效或添加有用的注释。 但是在CSS中，必须同时使用开头和结尾字符来指定任何注释的边界。

For quick, temporary fixes, however, it’s acceptable to create a sort of faux CSS comment by applying the principle we discussed in the previous section on CSS errors. Let’s say we have the following CSS:

但是，对于快速的临时修复，可以采用我们在上一节有关CSS错误的部分中讨论的原理来创建一种人造CSS注释。 假设我们有以下CSS：

.center-global {
  max-width: 1020px;
  margin: 0 auto;
}

And let’s say we want to temporarily remove the first line (the max-width declaration). We could do this:

假设我们要暂时删除第一行( max-width声明)。 我们可以这样做：

.center-global {
 /* max-width: 1020px; */
  margin: 0 auto;
}

This works fine, but a quicker way to achieve the same result is simply to put some random characters at the beginning of the line, like so:

这可以很好地工作，但是获得相同结果的一种更快的方法是简单地将一些随机字符放在行首，如下所示：

.center-global {
 AAAAmax-width: 1020px;
 margin: 0 auto;
}

It’s quick and effective, but don’t ever leave your CSS like this on a live website. It’s not valid CSS and should only be used in development for doing quick debugging.

它既快速又有效，但是永远不要将CSS留在实时网站上。 它不是有效CSS，只能在开发中用于进行快速调试。

翻译自: https://www.sitepoint.com/css-comments/

css注释