CSS编码约定

动机(Motivation)

Why standards and conventions? Well, it makes the code more predictable. You know where to look when you need to change/debug something and also other coders can pick up easier if they know what conventions you followed. PHP (actually PEAR) has it, Java has it, but I couldn't find anything for CSS, so here are a few ideas.

为什么要使用标准和约定？ 好吧，它使代码更可预测。 您知道在什么地方需要更改/调试时可以在哪里寻找，而且其他编码人员如果知道您遵循的约定，则可以更轻松地掌握它们。 PHP(实际上是PEAR)有它，Java有它，但是我找不到CSS的任何东西，所以这里有一些想法。

The important thing to remember is - it's not that important what exactly is a chosen standard or convention, the most important is that there is one. The rest, the details, is just common sense, and since "the common sense is not common to everybody", pick whatever makes sense for you. Below is a suggestion to get you started and build upon.

要记住的重要一点是-选择的标准或约定到底是什么并不重要，最重要的是有一个。 其余的细节只是常识，并且由于“常识不是每个人都常识”，因此请选择对您有意义的任何东西。 以下是一个建议，可帮助您入门和继续学习。

举个例子 (By example)

OK, here's everything this post is about, in a few lines, the rest is just elaborating on this:

好的，这是这篇文章的全部内容，其余几行仅在此进行阐述：

.container-subcontainer-general-specific {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
}

术语 (Terminology)

Before starting to talk about the coding style and conventions, let's quickly review what are the different terms used to describe the elements of the CSS puzzle.

在开始讨论编码风格和约定之前，让我们快速回顾一下用于描述CSS难题元素的不同术语。

selector {
    property: value;
}

The whole thing above is called "a style" or "a style definition". "Style name" may be used as a synonymous for "selector". "Property-value pair" needs a better name.

上面的整个内容称为“样式”或“样式定义”。 “样式名称”可用作“选择器”的同义词。 “属性值对”需要一个更好的名称。

间距 (Spacing)

Generally spacing promotes readability, so let's take advantage of it.

通常，空格会提高可读性，所以让我们利用它。

样式定义之间的空线 (Empty lines between style definitions)

Allow the separate style definitions to breathe, by adding one (and only one) empty line between them, like:

通过在它们之间添加一个(并且只有一个)空行来使单独的样式定义更加美观，例如：

.some-class {
    color: red;
}

.another-class {
   color: blue;

}

1个标签= 4个空格 (1 tab = 4 spaces)

Indentation also helps with the readability of the code. So put every property-value pair on a new line and indent it with 4 spaces from the beginning of the line. You can use a tab for indentation, it doesn't matter, this is just a personal preference. To avoid hitting [space] 4 times, configure your editor to do it for you when you hit [tab]. Every half-decent text editor has this configurable (Notepad is not the best choice for a coding editor)

缩进还有助于提高代码的可读性。 因此，将每个属性值对放在新行上，并从行首开始缩进4个空格。 您可以使用制表符进行缩进，没关系，这只是个人喜好。 为避免击中[space] 4次，请配置编辑器以在击中[tab]时为您执行。 每个半体面的文本编辑器都具有此可配置的功能(记事本不是编码编辑器的最佳选择)

冒号后的空格 (Space after colons)

Visually emphasis on the separation between a property and value, by adding a space after the colon, like:

通过在冒号后面添加一个空格，在视觉上强调属性和值之间的分隔，例如：

.class {
    prop: value;
}

... and not

... 并不是

.class {
    prop:value;
}

... or

... 要么

.class {
    prop:      value;
}

大括号 (Curly brackets)

Curly brackets that embrace all property-value pairs in a style definition follow your favourite if-then-else style you'd use in other programming languages. The opening bracket may be on the same line as the selector identifier or it can go alone on the next line

在样式定义中包含所有属性值对的花括号都遵循您在其他编程语言中使用的最喜欢的if-then-else样式。 左括号可以与选择器标识符位于同一行，也可以在下一行单独使用

.class-name {
    color: green;
}

or

要么

.class-name
{
    color: green;
}

I personally prefer the first.

我个人更喜欢第一个。

速记 (Shorthands)

The use of shorthands is forbidden, because they are harder to read.I would advise against the use of shorthands, because (for a non-expert) they are harder to read. Again, like I said in the beginning, it's you who decide on the type of style to follow, so if the majority of your team is comfortable with shorthands, by all means, use them. But I think that in most cases, the use of shorthands would cause more troubles (will obfuscate the stylesheets) that outweighs their benefits (less bandwidth). Consider:

禁止使用速记，因为它们难以阅读。 我建议不要使用速记，因为(对于非专家而言)较难阅读。 再次，就像我在开始时所说的那样，是由您决定要遵循的样式类型，因此，如果团队中的大多数人都对速记感到满意，则一定要使用速记。 但是我认为，在大多数情况下，使用简写会带来更多的麻烦(会使样式表难以理解)，而超过它们的好处(减少带宽)。 考虑：

.text {
    font: 1em/1.1em bold italic small-caps Verdana, Arial, Helvetica, sans-serif;
}

and

和

.text {
    font-size: 10em;
    line-height: 1.1em;
    font-weight: bold;
    font-style: italic;
    font-variant: small-caps;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

The border style is an exception from that rule, because short handing it is so widespread and because (unlike "font" and others) the order of its properties is not important. For example:

边框样式是该规则的一个例外，因为速记是如此广泛，并且因为(不同于“字体”和其他字体)其属性的顺序并不重要。 例如：

.some-div {
    border: 1px #ff0000 solid;
}

...is the same as...

...是相同的...

.some-div {
    border: solid 1px #ff0000;

}

and is just as readable.

并且可读性强。

行结束 (End of line)

Good practice is to always end the lines (the property-value pairs) with semi-colon, even when not necessary (last pair in a selector). This way it's easier to add more properties later on, without even bothering to check if the previous property-value pair was properly terminated.

优良作法是，即使没有必要(选择器中的最后一对)，也总是用分号结束行(属性值对)。 这样，以后添加更多属性变得更加容易，甚至不必费心检查先前的属性-值对是否正确终止。

命名选择器 (Naming selectors)

• The most important thing to have in mind is the content nature of the HTML document, not its presentation. Selector names should describe the content.
  要记住的最重要的事情是HTML文档的内容性质，而不是其表示形式。 选择器名称应描述内容。
• Avoid presentation-specific words in the name, like "blue", "text-gray", or "light-box". What happens when you decide to change the color? The class "blue" is actually red?
  避免在名称中使用特定于演示的单词，例如“蓝色”，“文本灰色”或“灯箱”。 当您决定更改颜色时会发生什么？ 类“蓝色”实际上是红色吗？
• Cascade the name, using a dash (-) as a separator. When cascading, have in mind what the content is. What do I mean by cascading? For example: "header" and "header-logo" (you have a page header that contains a logo at, say, the top-left corner) or "footer" and "footer-copyright"
  使用破折号(-)作为分隔符层叠名称。 级联时，请记住内容是什么。 级联是什么意思？ 例如：“页眉”和“页眉徽标”(您的页面页眉在左上角包含徽标)或“页脚”和“页脚版权”
• Use full descriptive words. Abbreviating a word may save you a few milliseconds to type initially, but may make your code harder to read, costing you more time down the road. Why crypting "product" to "prod" or the so common "txt" (just spell it out as it is, "text")? Being consistent in this will save you the time spent thinking (or trial-error-ing) how exactly you abbreviated a word five days ago. (OK, OK, there are exceptions, you can use "url" instead of "uniform-resource-locator" :D)
  使用完整的描述性词。 缩写一个单词可能会节省您最初输入的几毫秒，但可能会使您的代码难以阅读，从而使您花费更多的时间。 为什么将“产品”加密为“产品”或常见的“ txt”(将其原样拼写为“文本”)？ 保持一致可以节省您五天前思考(或尝试错误)缩写词的确切时间。 (好的，好的，有例外，您可以使用“ url”代替“ uniform-resource-locator”：D)
• Names are lowercase. There are browser problems with case sensitivity, so you're safe always lowercasing.
  名称是小写的。 浏览器存在区分大小写的问题，因此请放心使用大写字母。

• Distinct words in the class name are separated by a dash. It's clear, readable and gives the underscore a well-deserved break. Use footer-copyright, not footer copyright, footerCopyright, FooterCopyRight, fOOtercopyRighT (god forbid!) or footer_copyright. Well, if you're attached (married ;)) to the underscore, I guess it's OK to keep using it, but consider leaving it for your Javascript code. The dash is not allowed in other languages' variable names, so use it when you can (in CSS), plus it's somewhat consistent with the property names (think font-size, background-color, etc.)

  类名中的不同单词用短划线隔开。 它清晰易读，并为下划线提供了应有的休假。 使用footer-copyright ，而不是footer copyright ， footerCopyright ， FooterCopyRight ， fOOtercopyRighT (禁止使用！)或footer_copyright 。 好吧，如果您将下划线附加(已结婚；))，我想可以继续使用它，但可以考虑将其留给您的Javascript代码使用。 其他语言的变量名称中不允许使用破折号，因此可以使用它(在CSS中)，并且它与属性名称有些一致(请考虑font-size ， background-color等)。

• Once again - use names that describe the content ("footer", "navigation", etc), rather than the presentation ("blue", "left", "big"...)
  再次-使用描述内容的名称(“页脚”，“导航”等)，而不是表示形式的名称(“蓝色”，“左侧”，“大” ...)

字号 (Font sizes)

When possible, use em instead of pix for sizing fonts, line heights, etc. This allows your visitors to use the built-in browser text sizing, without you coding a special text size feature (which will probably limit the user to the choices you decide anyway).

如果可能，请使用em而不是pix来设置字体，行高等大小。这使您的访问者可以使用内置的浏览器文本大小设置，而无需编码特殊的文本大小功能(这可能会将用户限制在您选择的范围内)还是要决定)。

题外话 (Offtopic)

Preferably use HTML tags to describe the content.

最好使用HTML标签来描述内容。

<h1 class="content-heading">I'm a heading</h1>

is better (semantically, for SEO, for the human reader) than

(对于SEO而言，对于人类读者而言)优于

<span class="content-heading">I'm a heading</span>

评论 (Comments)

We all love to read other people's code comments. Writing our own comments is probably not as fun, but is highly encouraged in the name of maintainability. When you comment, use the /* comment here */ style. Line comments (the ones with // at the beginning) are not part of the CSS2 standard and may cause issues in some browser (or alternatively used as a workaround hack for some browsers, but this is another story)

我们都喜欢阅读其他人的代码注释。 编写我们自己的评论可能并不那么有趣，但是强烈建议以可维护性为名。 当您发表评论时，请在/* comment here */使用/* comment here */样式。 行注释(以//开头的注释)不是CSS2标准的一部分，可能会在某些浏览器中引起问题(或用作某些浏览器的变通方法，但这是另一回事了)

结论 (Conclusion)

I can only hope this has inspired you to adopt a CSS coding style convention/standard in your daily work. I'd love to hear you opinion on this topic. Are you currently using a standard? Do you know of any available on the web?

我只能希望这激发了您在日常工作中采用CSS编码样式的约定/标准。 我很想听听您对此主题的看法。 您当前正在使用标准吗？ 您是否知道网络上有任何可用内容？

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/css-coding-conventions/