web前端规范整理-CSDN博客

本文链接：https://blog.csdn.net/sx_nzr/article/details/44302041
/*---------------------------------- 前端规范整理 -----------------------------------*/
/*--------- css ----------*/
/*
  css命名最好要语义化，
  简短的css样式名可采用驼峰命名法（驼峰命名法用来区别不同的单词。划线命名法表明从属或层级关系），如：loginOut ,returnHome ,contentEdit ……
  划线命名法，如：top_inner_link , tab_panel_active , markdown_file_msg ,edit-mini-button……
  不允许通过1、2、3等序号进行命名，如：#img1、.content2
  不要轻易改动全站级CSS和通用CSS库。改动后，要在开发组内申明并经过全面测试。
  尽量不用"*"来选择元素，
  避免在CSS中使用expression。
  尽量不要在CSS中使用!important。
  避免过小的背景图片平铺。其实性能消耗更大，在页面滚动、拖动等操作后平铺背景的地方会全部重新paint及render。而裁剪稍大张的css背景，如果是png格式的其实大小不会增加很多。
  也尽量少用图片repeat, 尤其在body当中,渲染性能极差, 如果需要用repeat的话, 图片的宽或高不能少于8px
  尽可能不用 css hack,，允许使用hack只会带来更多的hack，越是使用它，就越是会依赖它。
  css书写应该紧凑，background、font、padding、margin 、border 。如：
   .box{
               border-color: #fff;
               border-width: 1px;
               border-style: solid;
         }
   可以写为一句:
   .box{
               border: 1px solid #fff;
          }
  
  层级(z-index)必须清晰明确，页面弹窗、气泡为最高级。
  font - size必须以px或pt为单位，推荐用px，不允许使用xx - small / x - small / small / medium / large / x - large / xx - large等值。
  优化css选择器：防止出现以下样式：#content .left button ,  #wrapper div table tbody tr td span （过长，查找性能变差）……
  css属性书写顺序, 建议遵循： 布局定位属性（显示属性）–>自身属性–>文本属性–>其他属性
  css全部完成后，嚣张图片用css sprites 合成。
  css全部完成后，可用vs的Ctrl +K +D 对代码进行格式化，并统一代码缩进方式及大小。
  为了防止编码转换时造成问题，建议将样式中文字体名字改成对应的英文名字，如：黑体(SimHei) 宋体(SimSun) 微软雅黑 (Microsoft Yahei，几个单词中间有空格组成的必须加引号), 以避免编码错误时乱码，如 .span{ font-family:'Microsoft Yahei'; } ，应避免：font-family:微软雅黑;
  一般情况下颜色统一用6位字符表示，例如#55eeff 。
  如果数值小于0,可以省略"0."，如：0.8px可以省略成.8px
  0px可以省略成0或none，
  空样式推荐使用none，此时浏览器不对目标元素进行任何渲染操作，节省性能。
  PSD 截图要求：小图标应切图成正方形，利于后期css sprites。
  避免class与id重名,不要随意新建id。


*/

/*--------- html ----------*/
/*
尽量标签语义化。
做好SEO，<meta>标签一定要写，
<title> 一定要写，在某些浏览器不写title的情况下，url地址会作为title显示（不美观）。
css与html分离, 页面中不允许出现css内容，包括行内样式和style。
<body>内的模块要加上注释,比如<!—content--><!—left sidebar-->等，大区块样式添加注释, 小区块适量注释。
尽可能减少div嵌套，吃内存,IE下还有可能引起栈溢出bug（弹窗过多的情况）。
脚本统一集中放在body底部，其它地方不要乱放脚本。
引入脚本顺序：jquery -> 库 -> 插件 ->common.js/global.js ->page.js ,去掉type属性
<head>中加入：<meta charset="utf-8" /> 默认utf-8编码。
每个脚本添加说明 ，如：
//
Auther:×××
Date:2014-3-16
Description：用于用户登入控制。 
//
特殊符号使用转义符替换，如：空格用 。
为表单元素添加label。
为图片加 alt 属性。
所有html标签闭合，可用vs检查是否有错，并用vs格式化代码。
重要的元素加上title。


*/
/*--------- javascript ----------*/
/*
代码统一保存为utf-8 格式
jQuery 对象用$前缀，如：$actionBar  $userName 
加载大量图片是采用图片代理模式，可参考百度图片搜索加载慢时的页面呈现方式。
js 命名 采用驼峰命名法。
少使用eval,with 语法。
每行代码分号结尾。
表达式过长应自动换行和缩进；少用不利于维护的过长的组合三目运算符。
内部变量或函数用_ 开头，如：_this , _innerFunction() 。
要传输到后台的大批量表单内容需要进行编码，防止XSS。
减少页面reflow,注重性能。
比较常用的方法统一扔到common.js，或尽量使用common.js里的方法。
JavaScript尽量避免使用全局变量，可通过命名空间或匿名函数将变量封装到闭包中。

*/