页面规范

为了更好的编写可读性高,性能高的前端代码,有一顶的页面规范是很重要的一层,下面是总结出的几种规范类型。

一、文件规范

  1. 文件分类:
    通用类(base,lib,ui…),业务类(album,artist,toplist…)
  2. 文件引入:
    行内样式(不推荐),外联引入,内联引入,避免在css中使用@import,
  3. 文件本身:
    文件名(由小写字母、数字、中划线组成),编码(utf-8)。

二、注释规范

  1. 块状注释:统一缩进,在被注释对象之上;
  2. 单行注释:文字两端需空格,在被注释对象之上;
  3. 行内注释:文字两端需空格,放在分号后面;
    如:.m-list li a{color:#fff;/* 对color的行内注释 */}

三、命名规范(主要是css的命名规范)

  1. 分类命名:对于布局样式加g,对于模块加m
    这里写图片描述
  2. 命名格式:选择器命名建议小写,如.list .title{color:#333};
    选择器长度需要权衡长度和可读性,如subnavigator缩写应为subnav;
  3. 语义化命名
    建议以内容语义命名
    这里写图片描述

四、书写规范

  1. 单行与多行(建议单行)
    .logo{width:100%;height:100%;float:left;}
  2. 空格与分号
    缩进(两个空格);规则内空格(不需要);保留最后一个属性的分号,不要省略;
    如.logo{width:100%;height:100%;float:left;}
  3. 属性顺序
    根据属性的重要性按顺序书写,水平方向从左到右,垂直方向从上到下
    这里写图片描述
  4. hack方式
    统一各浏览器的hack方式
    不要滥用hack
    这里写图片描述
  5. 值格式
    统一属性值(如color,url()):color十六进制表示,url单引号

五、其他规范

  1. html规范
    (1) 文档声明:如”<!DOCTYPE html>”,且首航顶格开始;
    (2)闭合:闭合标签(<div></div>),自闭和标签(<input />);
    (3)属性:如,统一这种写法;
    (4)层级:用缩进体现层级,提高可读性,标签正确嵌套,但嵌套不宜太深;
    (5)注释:如布局注释,头尾;
    (6)大小写:便签属性均小写
  2. 图片规范
    (1)文件名称:语义和长度,长度不宜过长;
    (2)保留源文件:便于修改和使用;
    (3)图片合并:尽可能使用sprite技术,splite图片可按模块,业务,页面来划分。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值