XFE DOCUMENT

# CSS规范

# 选择器

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

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

    错误示范：

     .without-animation .book-body .body-inner .book-header .dropdown .dropdown-menu .buttons{}
 .without-animation .book-body .body-inner .book-header .dropdown .dropdown-right .buttons{}
 .without-animation .book-body .body-inner .book-header .pull-left .dropdown-menu .buttons{}
 .without-animation .book-body .body-inner .book-header .pull-left .dropdown-right .buttons{}
 .without-animation .book-body .body-inner .book-header .font-settings .dropdown-menu .buttons{}
 .without-animation .book-body .body-inner .book-header .font-settings .dropdown-right .buttons{}
 .without-animation .book-body .body-inner .book-header .js-toolbar-action .dropdown-menu .buttons{}
 .without-animation .book-body .body-inner .book-header .js-toolbar-action .dropdown-right .buttons{}

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

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

    错误示范：

     //会导致页面所有的a标签都被加上背景
 a{background:url(xxx);}

 //后期修改可能会添加一些span标签，如果刚好在div里面，会被污染；不利于后期维护
 div span{display:block}

# 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;
}

← 图片处理 →