是否有推荐的 HTML/CSS/JavaScript 编码风格指南？ [关闭]答案

【问题标题】：Is there a recommended HTML/CSS/JavaScript coding style guide? [closed]是否有推荐的 HTML/CSS/JavaScript 编码风格指南？ [关闭]
【发布时间】：2012-02-10 10:50:44
【问题描述】：

我的团队正在尝试就通用的 HTML/CSS/Javascript 编码风格指南达成一致。我找到了Google JavaScript Style Guide，但没有类似的 HTML 或 CSS。

如果有一些常用的推荐类或 ID 命名约定，我特别感兴趣。

【问题讨论】：

标签： javascript html css coding-style

【解决方案1】：

Google 现在实际上有自己的 HTML 和 CSS 样式指南：https://google.github.io/styleguide/htmlcssguide.html

【讨论】：

Google 的 JavaScript 样式指南也是如此：google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml 两者都很棒。由于 JavaDoc 和 JSDoc 之间的相似性，JS 版本中的约定对于 Java 开发人员来说可能看起来非常熟悉。
死链接；请尝试在帖子中发布内容以供后代使用。

【解决方案2】：

对于 JavaScript，请使用 Standard Style。

【讨论】：

【解决方案3】：

就 CSS 而言，这很好： http://woork.blogspot.com/2008/11/useful-guidelines-to-improve-css-coding.html

我添加到我的 CSS 的个人风格是选项卡，我认为嵌套元素应该是选项卡，例如：

table 
{ 
}
  tr
  {
  }
    td
    {
    }

您还可以在 css 中使用名称连接和制表符的组合，例如

.main
{
}
  .main-title
  {
  }
    .main-title > h1
    {
    }
  .main-content
  {
  }

刚刚发现一篇关于 CSS 命名的有趣文章： http://woork.blogspot.com/2008/11/css-coding-semantic-approach-in-naming.html 有 10 个不同的 CSS 框架和 11 个 CSS 命名约定文章的链接。

对于 JavaScript，我相信您发布的 google 样式指南很好。

【讨论】：

感谢您的链接。他们真的很有帮助。

【解决方案4】：

今天很多人使用的一些 html/css 指南是object-oriented css。我个人不喜欢它“强迫”你使用某些结构/名称，但如果你的团队很大，这肯定是一条路！

【讨论】：

【解决方案5】：

阅读：

https://developer.mozilla.org/En/Mozilla_Coding_Style_Guide

没有这样的 HTML 和 CSS 样式指南，您必须自学。
this link 可能对您有用。

另一种方法是使用validator 来检查您的代码

【讨论】：

感谢您的链接。它包含一些 JavaScript 编码指南，但没有关于 HTML/CSS 的内容。

【解决方案6】：

我从未听说过任何 HTML/CSS，我不确定您是否真的需要。

样式指南的主要目的是通过使用熟悉的视觉布局和命名约定使代码快速浏览可读，以便开发人员知道某物的作用，因为这也是他们对它进行布局/命名的方式。与 JavaScript 这样的复杂语言相比，HTML/CSS 在处理方式上的变化范围要小得多。 HTML 是标记和严格嵌套的强制特定布局，而 CSS 大多只有一个代码结构，所以你只剩下名称，因为它们不描述动作并且不处理数据，很少需要变得非常复杂.

关于 JavaScript，与任何语言一样，您需要选择一套标准并坚持下去。哪个并不重要，因为有人总是喜欢不同的集合。一致性是关键，所以唯一要寻找的是与您正在使用的任何大型库相匹配的集合。我从事的一个项目有自己的 PHP 规则，也必须用于 JavaScript。这使得当库代码使用 camelCase() 而其他代码使用 words_separated_by_underscores() 作为函数名时，它看起来很奇怪。

另一个小问题可能是您最喜欢的 IDE 可能会或可能不会通过其自动格式化/错误标记来很好地支持执行一组特定的标准。一键修复草率的代码有时是一种真正的奢侈！

【讨论】：

很好的答案，谢谢。关于 CSS 类/id 命名，我无法在 camelCase 和 names-separated-with-dashes 之间做出决定。
我建议使用破折号，因为 XHTML 都是小写的，CSS 的所有其他部分都是破折号分隔的，例如字体大小，背景颜色。我没有提到的另一件事是，一目了然地知道你正在看什么语言是有帮助的，所以如果用于 CSS，camelCase 可能会稍微混淆一些事情。
谢谢！我们使用的 JQuery UI 库也使用破折号。所以我们决定用破折号。
我不能同意这一点。 CSS 和 HTML 在大型项目中可能会变得非常复杂。因为每个 CSS 类都是全局的，所以一个好的命名约定在这里非常重要，这就是为什么像 BEM 这样的想法如此受欢迎的原因。使用 Angular 和 Polymer 等 Web 组件或框架，我们将更多复杂性转移到 HTML，因此这里也需要良好的约定。