clear code

HTML标签

1. 标签必须合法且闭合、嵌套正确，标签名需小写

2. 标签语法无错误，需要符合语义化

3. 标签的自定义属性以data-开头，如：<a href="#" data-num='18'></a>

4. 除非有特定的功能、组件要求等，禁止随意使用id来定义元素样式

链接

1. 给 <a> 标签加上title属性

2. <a>标签的href属性必须写上链接地址，暂无的加上javascript:alert('敬请期待！')

3. 非本专题的页面间跳转，采用打开新窗口模式：target="_blank"

https协议自适应

<style>
//CSS背景图片
.bg{background: url(//game.gtimg.cn/images/cf/cp/a20161021sqjs/hd.jpg) no-repeat;}
</style>
//链接URL
<a href="//cf.qq.com/main.shtml">进入官网</a>
//图片SRC
<img src="//game.gtimg.cn/images/cf/web201610/logo.png">
//JS链接
<script src="//ossweb-img.qq.com/images/js/title.js"></script>

css

选择器

1. CSS类名命名参考注释与命名

2. 禁止使用层级过深的选择器，最多3级。

3. 除非有特定的功能、组件要求等，禁止随意使用id来定义元素样式

4. 除非是样式reset需要，禁止对纯元素选择器设置特定样式，避免样式污染

reset示例

• pc端

body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form,header,section,article,footer{margin:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,'\5FAE\8F6F\96C5\9ED1',sans-serif}
h1,h2,h3,h4,h5,h6{font-size:100%}
em,b{font-style:normal}
a{text-decoration:none} 
a:hover{text-decoration:underline}
img{border:0} 
body{padding-top:42px} 
button,input,select,textarea{font-size:100%;outline:none}
table{border-collapse:collapse;border-spacing:0}
td,th,ul,ol{padding:0}

• 移动端
有较多文字的文章类页面：

/* 移动端常用reset.css (文字版本) */
/* reset */
html,body,div,p,ul,li,dl,dt,dd,em,i,span,a,img,input,h1,h2,h3,h4,h5 {margin:0;padding:0}
a,img,input {border:none;}
body{font: 14px/1.75 -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;}
a {text-decoration:none;}
ul,li{list-style: none}

如果页面无文字，或者不希望文字被长按选中，可使用下面的reset；适合于大多数专题页面

/* 移动端常用reset.css (无文字版本) */
/* reset */
html,body,div,p,ul,li,dl,dt,dd,em,i,span,a,img,input,h1,h2,h3,h4,h5 {margin:0;padding:0}
a,img,input {border:none;}
body{font: 14px/1.75  -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-tap-highlight-color: rgba(0,0,0,0);}
a {text-decoration:none;}
ul,li{list-style: none}
a, img {-webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}

 

命名

样式命名

1. class、id都需小写

2. 命名使用英文，禁止使用特殊字符

3. 样式名不能包含ad、guanggao、ads、gg是广告含义的关键词，避免元素被网页拓展、插件屏蔽

4. 名称间隔使用符号

5. 涉及数据、交互等需要联调的部分，禁止通过id选择器定义样式，以免开发过程中id名变化，引起页局错乱

6. 类名命名需要语义化，参考下面的示例：

.wrap{}                 //外层容器
.mod-box{}              //模块容器
.btn-start{}            //开始
.btn-download-ios{}     //ios下载
.btn-download-andriod{} //安卓下载
.btn-head-nav1{}        //头部导航链
.btn-news-more{}        //更多新闻
.btn-play{}             //播放视频
.btn-ico{}              //按钮ico
.btn-lottery{}          //开始抽奖
.side-nav{}             //侧栏导航
.side-nav-btn1{}        //侧栏导航-链接1
.btn-more{}             //更多

图片命名

1. 图片名称必须小写，禁止使用特殊字符、中文

2. 使用英文或拼音缩写，禁止特殊字符

3. 名称间隔使用符号

4. 命名需要能体现图片的大概用途

5. 禁止文件名和实际图片内容不符。反面例子：图片名为'weixin-qrcode'，图片内容却是头像。

bg.jpg          //背景图片
mod-bg.jpg      //模块背景
sprites.png     //精灵图
btn-start.png   //开始按钮
ico-play.png    //修饰性图片

文件命名

rem布局

• viewport
• <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

• 初始字号
css中设定html根元素的初始字体大小为100px html{font-size:100px;}

• 单位转换
不管你拿到的设计稿宽度是640px还是750px，多大都一样。和我们平时做PC页面的做法基本一样，只需要把单位px换算成rem，所有设计稿的的元素大小全除以100单位换成rem，例如设计稿上个某个文字的大小为30px，直接写font-size:0.3rem。

• 示例代码
用 onorientationchange函数来检测屏幕旋转，在一些APP或游戏内嵌页面会有该函数不会执行、orientation获取不到的情况。所以如果是游戏app内嵌页建议使用 resize事件，检查宽高变化来检测屏幕是否旋转。

<script>
//屏幕适应
(function (win, doc) {
if (!win.addEventListener) return;
var html = document.documentElement;
function setFont() {
var html = document.documentElement;
var k = 640;
html.style.fontSize = html.clientWidth / k * 100 + "px";
}
setFont();
setTimeout(function () {
setFont();
}, 300);
doc.addEventListener('DOMContentLoaded', setFont, false);
win.addEventListener('resize', setFont, false);
win.addEventListener('load', setFont, false);
})(window, document);
</script>