UI框架HTML、CSS编写规范.doc

甘肃万维信息科技有限公司2013年UI框架标准HTML、CSS编写规范（交流测试版）须知本文档尽为测试交流版本， 非后期完善版本，其中必有疏漏，如有意见或建议，请发送意见至吉兴佳公司邮箱，或连博公司OA邮箱。目录一常规书写规范及方法41. 书写要求规范5(1) 选择DOCTYPE：5(2) 指定语言及字符集5(3) 辅助图片用背影图处理5(4) 结构与样式分离：5(5) id和class名5(6) id和class的命名风格6(7) 块内容缩进6(8) 属性值前增加个空格6(9) 分割选择器7(10) 一行只有一个css属性，二个规则间有一个空行7(11) 尽量不适用次级选择器72. 书写顺序规范8二注释书写规范91 . 行间注释：92 .整段注释：10三样式属性代码缩写101.属性为0102.移除选择器103.背景114.颜色115.Margin/ Padding/Border116.文字127.列表12四hack书写规范13五UI框架结构及命名要求141.UI框架CSS文件结构14（1）初始化样式表（reset.css）14（2）框架布局样式（layout-布局名.css）14（3）皮肤样式表（skin-皮肤名.css）15（4）开发端新增样式表（other.css）152.CSS框架命名标准及实例15六、DIV+CSS命名参考表：21一常规书写规范及方法 1. 书写要求规范(1) 选择DOCTYPE： 使用HTML5最新的头部声明方式(2) 指定语言及字符集为文档设定语言编码 (3) 辅助图片用背影图处理#logo background: url(images/logo.jpg) #FEFEFE no-repeat right bottom; (4) 结构与样式分离： 页面里写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。 (5) id和class名使用富有含义和通用的id和class名。使用功能性和通用性的命名方式减少文档或模板的不必要的改动。不推荐的写法：/* 推荐使用: 具体的词 */#gallery #login .video /* 推荐使用: 通用的词语 */.aux .alt (6) id和class的命名风格id和class的命名在保持语义性的同时尽可能的短。推荐的写法：#nav .author 可以缩写单词，但缩写后务必能让人明白其含义。比如author缩写成atr就非常费解。(7) 块内容缩进缩进所有的块状内容。media all and (min-width:400px) html background: #fff;color: #444; (8) 属性值前增加个空格推荐的写法：h3 font-weight: bold;(9) 分割选择器推荐的写法：h1,h2,h3 font-weight: normal;line-height: 1.2;(10) 一行只有一个css属性，二个规则间有一个空行html background: #fff;body margin: auto;width: 50%;(11) 尽量不使用次级选择器不使用次级选择器，除了循环过多的元素可以使用两级选择器，因为这会影响性能#example .error .from td.list li2. 书写顺序规范1.书写顺序不强制书写顺序。但应该养成良好的习惯，让看代码的人更易理解。易读对于团队协作来说是非常重要的：框架为先，细节次之比如写一个浮动容器的样式，我们应该先让这个容器的框架被渲染出来，让大家看到基本的网站框架。然后再再去渲染容器里面的内容。最终呈现给用户. 通常像 color font padding 之类的，写在后面。例子： .selectorfloat: left;width: 300px;height: 200px;font-size: 14px;color: #f36;2. 有因才有果比如想使用”图片替换文字“技术，通常要使用的text-indent。如果我们使用标签的是 span：这个文字将被图片替换我们应该是先将 span 变成”块级元素“（使用 display:block，虽然他永远不是块级元素），再将文字 indent。而不是先 indent 再变成块级的：.thepicdisplay:block;text-indent:-9999em;又如我们，如果想让一个span 使用 margin, 那么我们应该这样写:spandisplay: block;margin-bottom: 10px; 而非 spanmargin-bottom: 10px;display: block;因为没有 display 之前，行内元素是没有 margin 的。二注释书写规范1 . 行间注释： 直接写于属性值后面，如： .search border: 1px solid #fff;/*定义搜索输入框边框*/ background: url(./images/icon.gif) no-report #333;/*定义搜索框的背景*/ 2 .整段注释： 分别在开始及结束地方加入注释，如： /*=搜索条=*/ .search border: 1px solid #fff; background: url(./images/icon.gif) no-repeat #333; /*=搜索条结束=*/ 三样式属性代码缩写 1. 属性为0书写原则是如果CSS属性值为0，不必为其添加单位(如:px/em) 例如：padding: 10px 5px 0px 0px;需要写成：padding: 10px 5px 0 0;2. 移除选择器选择器是你在为一些元素应用CSS样式时的基本方法，比如h1, h2, h2, div, strong, pre, ul, ol等等如果你使用了class(.类名)或ID(#id名),就不需要再在声明CSS时包含选择器。例如：div#logowrap需要写成：#logowrap3. 背景背景(background)属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数例如：background-image: url(“logo.png”);background-position: top center;background-repeat: no-repeat;必须写成:background: url(logo.png) no-repeat top center;4. 颜色颜色(color)属性在CSS通常指定为一个十六进制的值,一个#加6位数，他的简写方式是如果颜色值由成对儿出现的三对而数字组成，你可以省略掉没对中的一个数字。#000000 可以写成 #000#336699 可以写成 #3695. Margin/ Padding/Borderpadding、margin、border(还有一些其他属性)时，记得要把按照顺时针的方向来声明属性值，也就是按照上-右-下-左的方向。关于这些属性还有另一个更加简单的写法，看看属性中上和下、左和右是否值是相等的，如果是那么就可以进一步优化了，你可以省略掉后两个值，剩下的两个值前者指上下，后者指左右例如：margin-top: 0px;margin-right: 10px;margin-bottom: 0px;margin-left: 10px;必须写成：margin: 0 10px 0 10px;6. 文字文字属性也有很多可能会用到的很多属性值例如：font-style: italic;font-variant: small-caps;font-weight: bold;font-size: 1em;line-height: 150%;font-family: 宋体, Arial, sans-serif;可以写成：font: italic small-caps bold 1em/150% 宋体, Arial, sans-serif;7. 列表例如：list-style-type: square;list-style-position: inside;list-style-image: url(filename.gif);必须写成:list-style: square inside url(filename.gif);四hack书写规范 因为不同浏览器对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，比如IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利用css 的hack来进行调整，当然在没有必要的情况下，最好不要写hack来进行调整，避免因为hack而导致页面出现问题。 IE6、IE7、Firefox之间的兼容写法： IE都能识别*;标准浏览器(如FF)不能识别*； IE6能识别_，但不能识别 !important, IE7能识别*，也能识别!important; FF不能识别*，但能识别!important; 根据上述表达，同一类/ID下的CSS hack可写为： .searchInput background-color: #333;/*三者皆可*/ *background-color: #666!important; /*仅IE7*/ _background-color: #999; /*仅IE6及IE6以下*/ 一般三者的书写顺序为：FF、IE7、IE6. 所有的IE可识别: Only IE 只有IE5.0可以识别: Only IE 5.0 IE5.0包换IE5.5都可以识别: Only IE 5.0+ 仅IE6可识别: Only IE 6- IE6及IE6以下的IE5.x都可识别: Only IE 6/+ 仅IE7可识别: Only IE 7/- 五UI框架结构及命名要求1.UI框架CSS文件结构CSS文件夹结构：|-css 样式文件夹|- reset.css初始化样式表|- layout-布局名.css框架布局样式表（只包含布局样式）|- skin-皮肤名.css皮肤样式表（只包含外观样式）|- other.css开发端新增样式表（需注释各个页面）（1） 初始化样式表（reset.css）用该样式表来重置页面元素，以保证所有浏览器的元素统一；代码请查看同文件夹下的reset.css内容放置：初始化dom元素的样式。（2）框架布局样式（layout-布局名.css）命名格式：layout-布局名.css内容放置：放置所有有关dom元素的大小，边距，浮动等控制dom元素属性的css样式。（3）皮肤样式表（skin-皮肤名.css）命名格式：skin-皮肤名.css内容放置：放置所有有关颜色，背景色，字体相关的css样式。（4）开发端新增样式表（other.css）命名格式：other.css内容放置：后台开发人员缩写的样式都放入其中，以便日后进行修改和添加。2.CSS框架命名标准及实例注意：非组件/兼容解决方案，请不要使用 .wui- 作为前缀.wui- 组件前缀.other- 其他项目组自行添加的样式的前缀注释的方法：/* name: wui-组件名* overview: 组件描述* required: 与其他组件的依赖关系，一般为null*/.wui-tabdisplay:block;overflow:hidden;实例：在模块化和命名上，以一个Tab组件为例，分解如下：值得注意的是：组件名是必选的在组件窗口最外一层添加状态，而非给每一个内容添加状态。除非内容有独立的状态比如，我们可以这样写： TITLE . 但不要这样写： TITLE . 组件命名规范示范图例：组件名尽量让人看到名字就能知道是什么组件，比较 wui-tab，比如 wui-nav 这样的命名。所有小图标都使用 .wui-icon .wui-icon-前缀，建议同一系统（域）人的常用小图标全部合成 sprite，以方便调用和减少网页请求。 组件整体状态 = 组件名 + 状态常用的状态有：hover, current, selected, disabled, focus, blur, checked, success, error 等。通常你的命名应该看起来像 .wui-name-hover, .wui-name-error 这样。组件模块 = 组件名 + 模块名常用模块名有：content, header, text, img,item, cell 等，只要词义表达了组件要实现的功能或者要表现出来的的外观就可以了。组件模块状态 = 组件模块 + 状态组件嵌套：大组件可有子组件命名。那导航栏的.wui-nav为例，如果有多级，可以这样命名：wui-nav wui-subnav(wui-nav的子类) wui-list(嵌套进去的其他组件) 主菜单 子菜单 ul class=wui-list .多状态：多状态时，用唯一的命名来代替，而非抽象名词。拿 wui-button 为例：wui-button wui-button-corner , wui-button-indexsign , wui-button-SOMEID而不要用 wui-button-round，这样，就可能会有： wui-button-round-a wui-button-round-b 了。按钮又有多个状态，命名就会太长了 wui-button-round-a-disabled关于 .w