HTML 规范

  • 分离的标记、样式和脚本

    结构、表现、行为分离

  • 在可能情况下验证你的标记

    使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能。

  • 技术不支持的时候使用备胎,如canvas

  • 编码格式:使用UTF-8

  • 语义性

    对于HTML5而言,例如header、footer、nav、section等跟div能实现的功能基本类似,但是语义性上有着天壤之别。

  • TODO待定项

    尚未实现的或待定的内容一定要标识强调出来,利用TODO辨识,而非其他诸如@@来强调。 
    在todo项中如果有必要列明联系人,比如负责人。在TODO后追加一个冒号作为行动内容,例 如 TODO:增加HTML5模板

  • 多媒体后备:为多媒体提供备选内容

    典型就是为img添加alt内容。

  • HTML 的模块化

    <div id="module-1" class="module">
    <h3>TITLE</h3>
    <p class="module-item">
    some text
    </p>
    </div> <!-- #module .module end -->`

CSS 规范

一、CSS文件

  • 注释

    /*
    @name: 文件的名称
    @description: 简要的描述这个css 文件功能
    @require: 依赖文件,没有就不用写
    @author: 作者 最好附带联系方式(邮箱)
    */
  • 文件编码级

    编码必须使用utf-8(无BOM)

二、 CSS书写顺序

不去完全按照某个书写顺序来写。但我们应该养成良好的习惯,让看代码的人更易理解。易读对于团队协作来说是非常重要的:**

1. 框架为先,细节次之。
比如写一个浮动容器的样式,我们应该先让这个容器的框架被渲染出来,让大家看到基本的 网站框架。然后再再去渲染容器里面的内容。最终呈现给用户. 通常像 color font padding 之类的,写在后面。
.selector{float:left;width:300px;height:200px;font-size:14px;color:#f36;}
2.有因才有果。
比如想使用”图片替换文字“技术,通常要使用的text-indent。如果我们使用标签的是 span:<span>这个文字将被图片替换</span>,那么正确写法: .thepic{display:block;text-indent:-9999em;}
我们应该是先将 span 变成”块级元素“,再将文字 indent。而不是先 indent 再变成块级 的。
又如我们,如果想让一个 span 使用 margin, 那么我们应该这样写: span{display:block;margin-bottom:10px;}
而非margin-bottom先行,因为没有 display 之前,行内元素是没有 margin 的。
  • 1.位置属性(position, top, right, z-index, display, float等)
  • 2.大小(width, height, padding, margin)
  • 3.文字系列(font, line-height, letter-spacing, color- text-align等)
  • 4.背景(background, border等)
  • 5.其他(animation, transition等)

三、 CSS书写规范

  • 模块注释

    /*区域模块-1    分模块的写上注释 */
    .classname, .ued{
    background:#f60 url(xxx/orange.png) no-repeat 0 0;
    }
    .ued>ul li>a{
    font-size:10px;
    } /*区域模块-2 分模块的写上注释 */
    .classname{
    width:950px;
    margin:0 auto;
    }
  • 避免内联样式

  • 避免使用低效选择器,参考这里

  • 不要随意使用id

    id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。

  • 使用有效的CSS, 除非是bugs处理或专属语法(浏览器私有前缀)

  • 使用短ID或类命名,但确保他们不要太过隐晦,或直白(如#blue-button)

  • 大型项目使用前缀,如#xyz-help, .xyz-column

  • 选择器尽可能简单,如#example,而不是ul #example

  • 使用缩写

    // 反对
    border-width: 1px;
    border-style: solid;
    border-color: #ccc; border:1px solid #ccc // 赞 color :#99ccff; // 反对
    color :#9cf; // 赞
  • url()中不使用引号,0后面不跟单位

    margin: 0px auto; // 反对

    margin :0 auto // 赞

  • 去掉小数点 0

    opacity : 0.8;  // 反对
    opacity : .8; // 赞
  • 每个声明最后都要有分号(即使是最后一个)

  • 避免浏览器hacks

  • 浏览器前浏览器私有写法在前,标准写法在后。

    -moz-box-shadow: 1px 2px 3px #ddd;
    -webkit-box-shadow: 1px 2px 3px #ddd;
    box-shadow: 1px 2px 3px #ddd;
  • 注释

    根据需要解释代码,这个就不多说了,团队开发这个非常重要,尽管很多时候大家不愿意遵守,但确实重要!!!

CSS样式表文件命名

  • 主要的 master.css
  • 模块 module.css
  • 基本共用 base.css
  • 布局、版面 layout.css
  • 主题 themes.css
  • 专栏 columns.css
  • 文字 font.css
  • 表单 forms.css
  • 补丁 mend.css
  • 打印 print.css

原文地址:http://my.oschina.net/frontendinfo/blog/184995#OSC_h3_5

html和css书写规范的更多相关文章

  1. CSS书写规范、命名规范、网易CSS框架NEC

    网易CSS框架NEC:http://nec.netease.com/ NEC框架的CSS规范:  CSS规范 - 分类方法 CSS规范 - 命名规则 CSS规范 - 代码格式 CSS规范 - 优化方案 ...

  2. CSS书写规范

    一.CSS书写顺序 1.位置属性(position,top,right,z-index,display,float等) 2.大小(width,height,padding,margin) 3.文字系列 ...

  3. 推荐大家使用的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  4. 分享给大家的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  5. CSS书写规范及顺序

    CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...

  6. 推荐大家使用的CSS书写规范及顺序

    @设计达人网 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文 ...

  7. CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总 ...

  8. CSS书写规范、顺序和命名规则

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考   这些是参考了国外一些文章以及我的个 ...

  9. 推荐大家使用的CSS书写规范、顺序(转载)

    转自:http://www.admin10000.com/document/2979.html 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体 ...

随机推荐

  1. linux系统下修改文件夹目录权限

    linux系统下修改文件夹目录权限 文件夹权限问题 Linux.Fedora.Ubuntu修改文件.文件夹权限的方法差不多.很多人开始接触Linux时都很头痛Linux的文件权限问题.这里告诉大家如何 ...

  2. css之div等继承问题--待续

    div哪些属性是可以继承的呢? 亲测:float可以继承(错的,见下解答,),display不可以继承.有待继续学习. float不可以继承, 简单来说:浮动的元素,顾名思义,就是这个元素“浮起来”了 ...

  3. tyvj1938 最优战舰

    描述 太空战队顺利地完成了它的第一次使命,这一行动的受益者陆军本部当即决定,请陆军的战士们投票选出最优战舰并报司令总部进行表彰.为防止有人利用高科技手段造假,陆军本部决定使用最原始的方法进行投票.可不 ...

  4. codevs1228 苹果树

    题目描述 Description 在卡卡的房子外面,有一棵苹果树.每年的春天,树上总会结出很多的苹果.卡卡非常喜欢吃苹果,所以他一直都精心的呵护这棵苹果树.我们知道树是有很多分叉点的,苹果会长在枝条的 ...

  5. Linux进程间通信(四):命名管道 mkfifo()、open()、read()、close()

    在前一篇文章—— Linux进程间通信 -- 使用匿名管道 中,我们看到了如何使用匿名管道来在进程之间传递数据,同时也看到了这个方式的一个缺陷,就是这些进程都由一个共同的祖先进程启动,这给我们在不相关 ...

  6. css特殊字符总结

    < :    &lt > :    &gt

  7. StartUML反向(逆向)Java工程通过代码生成类图

     在软件工程中,通过都是先了详细设计,然后按照详细设计来进行开发.在编写详细设计的时候,通常都会画一些类图.时序图.流程图等等UML设计,然后通过uml类图生成代码,这个属于正向工程生成代码,然而在实 ...

  8. PYTHON 写函数,检查用户传入的对象(字符串、列表、元组)的每一个元素是否含有空内容。

    def shifou_space(args): ret = True for a in args: if a.isspace(): ret = False break return ret resul ...

  9. python __call__ 内置函数的使用

    对象通过提供__call__(slef, [,*args [,**kwargs]])方法可以模拟函数的行为, 如果一个对象x提供了该方法,就可以像函数一样使用它,也就是说x(arg1, arg2... ...

  10. openstack网络(neutron)模式之GRE的基本原理

    neutron网络目的是为OpenStack云更灵活的划分网络,在多租户的环境下提供给每个租户独立的网络环境. neutron混合实施了第二层的VLAN和第三层的路由服务,它可为支持的网络提供防火墙, ...