HTML和CSS编码指南

我们正在与外部顾问签订合同，为我们目前正在开发的新项目的大多数主要页面生成XHTML（过渡）和CSS。HTML和CSS编码指南

我被要求为他们制定一份指导方针清单，以便我们确信可以达到一定的质量水平。作为一个技术背景，我们将把他们提供的原始HTML整合到ASP.NET Web表单应用程序中（利用通常的主页/外部样式表/ jquery）。 JavaScript不应该是一个考虑因素，但应该是CSS的格式和组织。

我已经开始了，但很快意识到这可能不是一个独特的情况，而且一个经过测试和测试的列表可能在那里，我至少可以用作模板！有没有人有过这方面的经验？

来源

2008-11-28 Kieran Benton

从技术角度来看，页面必须pass validation可能是我的第一个测试。

我希望该网站能够被禁用JavaScript的用户以及使用屏幕阅读器的用户使用（这是相当不错的，因为它还应该突出显示使用不当的表格和其他内容如丢失的其他内容图像alt标签，标题标签的不一致使用等）。

来源

2008-11-28 15:06:59

+1。另外，在浏览器中禁用CSS应该使页面变成一个干净的，自上而下的文本文档：http://www.singingeels.com/Articles/How_To_Pure_CSS_Design.aspx – 2008-11-28 15:23:31

+1基础知识。尽管我不会去禁用CSS。甚至掌上电脑和什么都没有CSS。 – 2008-11-28 15:40:19

除了确认以下几点应该牢记 - 辅助功能（谁是观众） - 基于CSS的设计（其中语义精心设计） - 与您的命名约定（CSS和ID命名保持一致。从长远来看，当需要做出任何改变，新的CSS必须被应用时，这将是有益的）。

退房从雅虎开发人员库中的以下最佳实践... http://developer.yahoo.com/performance/rules.html

此外，由于使用的是ASP.net命名用户控件作为产生可能是相当长的和意想不到的客户端ID时要小心（asp.net在运行时生成id）;

一些好的信息可以在 http://woork.blogspot.com/2008/11/useful-guidelines-to-improve-css-coding.html

来源

2008-11-28 15:16:34

发现的确，确保该页面通过验证。

还要注意语义，当CSS被禁用时（这是一些浏览器和屏幕阅读器的情况）页面应该按逻辑顺序排列。确保标题实际上是< h＃>标签，并且所有图像都有适当的alt标签。还要确保表格仅用于显示信息，不用于格式化。该菜单应该被构造为一个列表而不是divs（语义）。

来源

2008-11-28 15:18:09

我总是为自己做的一个很好的测试是打开页面和按Ctrl +滚动。缩放让您立即了解您的设计的灵活性和流动性。

在IE中这往往会失败，不管是什么，但你也可以尝试使字体更大，看看会发生什么（注意按钮例如垂直拉伸）

来源

2008-11-28 15:42:02

给他们浏览器的列表（浏览器版本和操作系统），你期望他们支持。

应该遵守可访问性准则吗？您可以同意支持Checklist for Web Content Accessibility Guidelines中的一些要点。该列表实际上非常有用，因为它不仅可以确保您的网站适用于残障人士，而且还适用于没有JavaScript，CSS和图片的浏览器。该清单还包含一些建立合理网站的一般良好做法。

由于您使用的是ASP.NET，请确保它们每个网页只包含一个<form>。或者至少，准备好一些解决方法，如果你允许他们使用更多。

如果您打算使用AJAX，请将它们显示为ASP.NET AJAX Control Toolkit，以便它们不会花时间在已经构建的东西上。

我会坚持说他们使用一些成熟的框架，如YUI css reset和jQuery。

来源

2008-11-28 16:01:32

在多个前端开发人员之间传递HTML/CSS模板的一件事是正确构造和缩进标记。书籍分为书卷，章节，段落，句子，单词，空格和句号的方式相同，有一个层次结构，使HTML和CSS易于阅读（另一方面，一种编码方式使事情成为可能一塌糊涂）

作为一个经验法则：

 <body> 
      <div id="first"> 
       <p> 
        Some text goes in here... 
       <p> 

       <ul> 
        <li>A list item</li> 
        <li>A list item</li> 
        <li>A list item</li> 
        <li> 
         <ul> 
          <li> 
            <a href="#">A link</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </div> <!-- #first ends --> 
    </body>

这种坚持结构确实可以通过使扫描代码超级简单的谁正在IT-削减时间不管他们是否写它与否。

来源

2010-08-30 05:54:47

HTML和CSS编码指南

回答

相关问题