代码之家 › 专栏 › 技术社区 › Kieran Benton

HTML和CSS编码指南

coding-style css html asp.net

Kieran Benton · 技术社区 · 16 年前

我们正在聘请外部顾问为我们目前正在进行的一个新项目的大部分主要页面生成XHTML(过渡)和CSS。

我被要求为他们列出一份指导方针清单,这样我们就可以确保达到一定的质量水平。作为一个技术背景,我们将把它们提供的原始HTML导入ASP.NET web表单应用程序(使用常用的母版页/外部样式表/jquery)。Javascript不应该被考虑,但CSS的格式和组织应该被考虑。

我已经有了一个开始,但很快意识到这可能不是一个独特的情况,一个经过尝试和测试的列表可能在某个地方,我至少可以用作模板!有人有过这方面的经验吗?

6 回复 | 直到 16 年前

Richard Ev 16 年前

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

我希望该站点能够被禁用JavaScript的人和使用屏幕阅读器的人使用(这是一个非常好的站点,因为它还应该强调使用不当的表和其他问题,例如缺少图像alt标记、标题标记使用不一致等)。

Boris Callens 16 年前

缩放可以让您立即了解设计的灵活性和流动性。

在IE中,无论发生什么情况,这都会失败,但在IE中,你也可以尝试将字体变大,看看会发生什么(例如,注意垂直拉伸的按钮)

Jan Aagaard 14 年前

给他们一个你希望他们支持的浏览器列表(浏览器版本和操作系统)。

是否应遵守准入指南?你可以同意支持报告中的一些观点 Checklist for Web Content Accessibility Guidelines . 这个列表实际上非常有用,因为它不仅可以确保你的网站为残疾人服务,还可以为没有JavaScript、CSS和图像的浏览器服务。该列表还包含一些构建合理网站的一般良好实践。

<form>

如果您打算使用AJAX,请向他们展示 ASP.NET AJAX Control Toolkit 这样他们就不会把时间花在已经建成的东西上。

YUI css reset 和 jQuery .

HandiworkNYC.com 14 年前

     <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>

这种对结构的坚持可以使代码扫描变得超级容易,从而真正减少时间,无论是谁在编写代码,都可以做到这一点。

rajesh pillai 16 年前

除了验证,还应记住以下几点 -基于CSS的设计(语义设计良好) -与您的命名约定保持一致(css和id命名。从长远来看,当需要进行任何更改、必须应用新的css等时,这将是有益的)。

http://developer.yahoo.com/performance/rules.html

另外,由于您使用的是ASP.net,因此在命名usercontrols时要小心,因为生成的客户端ID可能非常长且出乎意料(ASP.net在运行时生成ID);

http://woork.blogspot.com/2008/11/useful-guidelines-to-improve-css-coding.html

mattruma 16 年前

还要注意语义,当CSS被禁用时(对于某些浏览器和屏幕阅读器来说),页面应该按逻辑顺序排列。确保标题实际上是<h#>标记,并确保所有图像都具有适当的alt标记。还要确保表格仅用于显示信息,而不用于格式化。菜单应构造为列表,而不是divs(语义)。