CSS，JS和HTML的代码审查指南

我被要求为审查CSS，JS和HTML创建准则。我知道有针对JS的编码指南，但对HTML和CSS一无所知。要复习JS，我一定会遵循这些准则并提及它们。但是CSS和HTML呢？除了逻辑错误和缩进问题之外，在查看标记和CSS时是否还需要检查某些特定事项？

要寻找的一些东西：

• 是否使用适当的HTML标签识别结构化信息？H1- H6用于标题，UL/ OL和LI列表等？
• 是（没有遗留的HTML标签<b>，<i>，<center>，<font>）使用？
• 网站是否使用最少的标记？
• 样式信息是否被外部化为CSS文件？
• 所有的Javascript是否都已外部化？包括事件处理程序？
• CSS类名称是否引用页面（img-caption）中的函数，而不是形式（bold-red）或内容（pink-elephant）？
• 图像是否采用适当的格式（PNG或JPEG，取决于类型）？
• 是否使用了最低版本的Javascript库？
• （可选）是否已将所有本地开发的Javascript和CSS文件最小化？
• HTML / CSS可以验证吗？
• 是否使用YSlow（或类似工具）检查/优化性能？
• （大部分）[SEO]是否可以使用Javascript访问该网站？
• [SEO]最相关的内容是否位于HTML的顶部？

HTML好的样式的重要元素之一是逐步增强。这意味着即使没有CSS或JavaScript，HTML布局也将呈现良好的效果。然后，一旦处理了JS / CSS，它将看起来更好（例如，旧式HTML <select>下拉列表将变为动画）。

这也与非侵入式标记有关。而不是<font style="color:red;font-size:16pt">Hello</font>使用<div class="red-colored-big-fond">Hello</div>。

与JavaScript相同。而不是<button onclick="javascript:alert('a');">Clickme</button>指定一个按钮类/ ID并从JavaScript中定位它。这也使您的标记代码更易于维护。

验证使用最少的标记量来完成任务。确保标记也是语义的，当标记执行相同的操作并提供更多信息时，请勿使用标记。验证没有将跨度设置为块元素，反之亦然。

此外，alex以环形交叉路口提出了一个重点。确保没有人使用像“ red-colored-big-font”这样的类名，因为在将它真正部署后大约20秒钟，有人会将其更改为蓝色小字体。我实际上已经看到了这个CSS：

.arial12pt { font-family: Verdana; font-size: 8pt; }

标记中的所有内容都应该描述页面是什么，而不是页面的外观。我绝对同意渐进式增强，但还是以回旋方式进行。该页面没有要求在没有CSS的情况下看起来几乎相同。不要试图使它们看起来相同，因为您最终会回到table-land和spacer.gif。

就HTML而言，我总是强调在文件中具有层次结构和缩进。例如，如果我有一堆div：

<div id="content">
   <div id="post">
     <div class="title">
       Blah Blah Title
     </div>
   </div>
</div>

我想这对于大多数创建布局和模板的人来说是相当明显的，但是我经常看到乱码的HTML没有任何结构层次，这使得其他人难以阅读。我想来自CS的更多背景，这是我想起的事情。CSS也是如此。假设您要设置div的样式：

#whatever{
    background-image: url('blah.gif');
    color: #FFF000;
}

当您习惯使用另一种混合语言（如PHP / Ruby / Whatever）时，缩进使快速阅读变得容易得多。同样，这取决于您的最佳工作方式，但是当其他人阅读我的HTML时，我喜欢使它真正有条理：)。

另外，如上所述，将CSS类和ids命名为与布局相关的名称始终是一个好主意，尤其是当它变得冗长时（就像用其他语言命名变量和方法一样）。还有一些需要注意的是页边距，填充和其他对齐问题的可怕的“猜测和检查”。我经常想避免的事情是在边距和填充中添加负数。如果您不是自己制作布局，并且以后想重新修改它，就可能会感到困惑，您可能必须对其进行大修。我认为，即使看起来不错，也不要尝试使用CSS中的任何胡言乱语或“ kludgy”。即使必须重组CSS，通常也有更好的方法！

对于Javascript，我一直希望它可以通过JSLint进行验证，我可以想到许多错误，JSLint会发现不使用它只是疯狂。

我遇到了我比较喜欢的标准文档。我还将回应关于渐进增强的内容。通常，如果其他人编写了HTML / CSS，则您应该可以稍后查看它，并惊喜地看到标记的效果还不错，并且应该能够轻松，高效地进行简单的样式调整。