HTML和CSS编码指南

Question

HTML和CSS编码指南

4

我们正在聘请外部顾问为我们目前正在开发的新项目的大多数主要页面生成XHTML（过渡）和CSS。我被要求为他们制定一份指南清单，以确保我们能够期望一定水平的质量。作为技术背景的一点说明，我们将把他们提供的原始HTML合并到一个ASP.NET Web Forms应用程序中（利用常规的主页/外部样式表/jQuery）。JavaScript不应该是一个考虑因素，但CSS的格式和组织应该是。我已经开始了，但很快意识到这可能不是一个独特的情况，可能有一个经过试验的清单可以用作模板！有人有这方面的经验吗？

- Kieran Benton

6个回答

2

我经常为自己做一个测试，就是打开页面并使用ctrl+滚轮进行缩放。缩放可以立即让你了解设计的灵活性和流动性如何。

在IE中，无论如何都往往会失败，但是你还可以尝试增大字体并观察发生了什么（例如注意垂直拉伸的按钮）。

- boris callens

2

给他们一个浏览器列表（浏览器版本和操作系统），您希望他们支持哪些浏览器。

应该遵守无障碍指南吗？您可以同意支持Web内容无障碍指南清单中的某些点。该列表实际上非常有用，因为它不仅可确保您的站点适用于残疾人士，而且还适用于没有JavaScript、CSS、图像的浏览器。该列表还包含一些构建合理网站的通用最佳实践。

由于您正在使用ASP.NET，请确保他们每个网页只包含一个<form>。或者至少要做好一些解决方法，如果允许他们使用更多表单。

如果计划使用AJAX，请向他们展示ASP.NET AJAX控件工具包，以便他们不要花时间去开发已经存在的功能。

我会坚持要求他们使用一些经过验证的框架，如YUI css reset和jQuery。

- Jan Aagaard

2

在多个前端开发人员之间传递 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>

这种对结构的坚持可以通过让任何人（无论是不是代码作者）都能轻松地扫描代码来节省时间。

- HandiworkNYC.com

1

除了验证，还应注意以下几点： - 可访问性（受众是谁） - 基于CSS的设计（语义良好设计） - 遵循一致的命名约定（CSS和ID命名。当需要进行任何更改时，在长期内将会有利，例如应用新的CSS等）。

从Yahoo开发人员库中查看以下最佳实践... 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

- Rajesh Pillai

1

确保页面通过验证。

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

- Pim Jager

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Richard E · Accepted Answer

从技术角度来看，页面必须通过验证可能是我首先要进行的测试。

我希望网站能够被禁用JavaScript的人和使用屏幕阅读器的人使用（这是一个很好的测试，因为它还可以突出显示不当使用表格和其他事项，如缺少图像alt标签、标题标签的不一致使用等等）。