编码规范CSSHTML 摘自kissyui

附文档模板

TODO

使用 TODO 来标记待做事情，便于后期搜索.
在 TODO 后添加 (姓名或邮件) 来表示分类.

例如

<!-- TODO(yiminghe): remove duplicate tag -->
<p><span>2</span></p>

注释

建议对超过10行的页面模块进行注释, 以降低开发人员的嵌套成本和后期的维护成本. 例如：

<div id="sample">
    ...
</div> <!-- #sample END -->

<div class="sample">
    ...
</div> <!-- .sample END -->

link link 用于引入 css 资源时, 可省去 media(默认为all) 和 type(默认为text/css) 属性;
style type 默认为 text/css, 可以省去;
script type 属性可以省去; 不赞成使用lang属性; 不要使用古老的<!– //–>这种hack脚本, 它用于阻止第一代浏览器(Netscape 1和Mosaic)将脚本显示成文字;

p 表示段落. 只能包含内联元素, 不能包含块级元素;

a a 存在 href 属性时表示链接, 无 href 属性但有 name 属性表示锚点;

img 请勿将img元素作为定位布局的工具, 不要用他显示空白图片; 给img元素增加alt属性;例如

<!-- 不推荐 -->
<img src="spreadsheet.png">

<!-- 推荐 -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

object 可以用来插入Flash;

dl 表示关联列表, dd是对dt的解释; dt和dd的对应关系比较随意：

一个dt对应多个dd、多个dt对应一个dd、多个dt对应多个dd, 都合法; 可用于名词/单词解释、日程列表、站点目录; * ul 表示无序列表; *ol 表示有序列表, 可用于排行榜等; li 表示列表项, 必须是ul/ol的子元素;

推荐使用 button 代替 input, 但必须声明 type;

文档模板

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Sample page</title>
        <link rel="stylesheet" href="css_example_url" />
    </head>
    <body>
        <div id="page">
            <div id="header">
                页头
            </div>
            <div id="content">
                主体
            </div>
            <div id="footer">
                页尾
            </div>
        </div>
        <script src="js_example_url"></script>
        <script>
        // 你的代码
        </script>
    </body>
</html>

规范CSS

id 和 class 的命名长度应该适中，不要太简略也不要太详细；例如

/* 不推荐 */
#navigation {}
.atr {}

/* 推荐 */
#nav {}
.author {}
简写属性名字

为了提高可读性，尽可能的使用简写属性。例如

/* 不推荐 */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

/* 推荐 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;