CSS相关规范
- 编码规范
以UTF-8无BOM编码作为文件格式，CSS文档显示的定义编码，在文档首行定义 @charset "utf-8"
- 命名规范
² 所有的命名都采用小写；
² 全部采用英文命名，避免使用拼音；
² 不可以用数字开头；
² 使用class选择器，避免使用ID选择器；
² 避免选择器命名过长时可选择使用缩写，保证缩写后还能较为清晰保持原单词所能表述的意思；
² 不依据表现形式来命名， 如big、left 等，要根据内容和功能来命名，如 tab、nav等；
² 语义化，望文见义，不要使用晦涩难懂的名称（参考尾页实例）；
² 建议使用“-”（短横线连字符）命名方法
- 书写规范
² 缩进：使用2个空格的缩进格式，或将TAB请设置为两个空格
² 换行：所有规则需要换行，并建议多组选择器之间同样换行
² 分号：每条规则结束后都必须加上分号
² 书写顺序
① 定位属性(position, top, right, z-index, display, float等)
② 大小属性(width, height, padding, margin)
③ 文本样式(font, line-height, letter-spacing, color- text-align等)
④ 背景属性(background, border等)
⑤ 其他属性/修饰(animation, transition等)
.example {
/* 定位属性*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* 大小属性 */
display: block;
float: right;
width: 100px;
height: 100px;
/* 文本属性*/
font: normal 13px "Aral", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* 其他/修饰 */
opacity: 1;
}
² 使用CSS简写属性：
简写属性是可以让你同时设置好几个CSS属性值，使用简写属性，工程师以编写更简洁、更具可读性的样式表，节省时间和精力，如background: #000 url(images/bg.gif) 100% no-repeat top right;
² 引用：不要在url()里对引用资源加引号
.example {
background:url(example.jpg) /*建议*/
}
.example {
background:url("example.jpg") /*不建议*/
}
² 去掉小数点前的“0”，省略“0”后面的单位
.box{
width: 0;
font-size: .5rem;
}
² 进制颜色代码缩写
.box{
/* 字体颜色一样 */
color: #000000;
color: #000;
/* 边框颜色一样 */
border-color: #eeffcc;
border-color: #efc;
}
² 注释
尽可能的为代码添加注释，CSS注释可以区分样式模块、解释作用、问题描述。
① 文件注释，写在文件头部：
/**
* @说明: 中文说明
* @作者: 某某某
* @更新: name (2020-12-03 18:32)
*/
② 普通注释：
/* 普通注释 */
③ 功能模块注释：
/**
* 模块名称: m-detail
* 说明: 中文说明
*/
- 选择器
² 权重：!important->内联->ID->类->标签|伪类|属性选择->伪对象->继承->通配符->继承
² 前缀：CSS选择器使用前缀能够较好的控制样式在项目间的影响。
g- ：全局通用样式命名，前缀g全称为global，一旦修改将影响全站样式。
m- ：模块命名方式。
ui- ：组件命名方式。
js- ：所有用于纯交互的命名，不涉及任何样式规则。
- CSS reset（重置）
CSS Reset意为重置默认样式。HTML中绝大部分标签元素在网页显示中都有一个默认属性值，为了避免重复定义元素样式，需要进行重置默认样式，强烈建议工程师将重置方法单独生成文件reset.css
/**
* @Description: reset.css 实例
* @Author: HC360
* @Update: name (2020-12-03 18:32)
*/
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}
- 常用的CSS命名建议
² 页面结构
容器: container 页头：header 内容：content
页面主体：main 页尾：footer 导航：nav
侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper
左右中：left right center
² 导航
导航：nav 主导航：main-nav 子导航：sub-nav
顶导航：top-nav 边导航：sidebar 左导航：left-side-bar
右导航：right-side-bar 菜单：menu 子菜单：sub-menu
标题: title 摘要: summary
² 功能
标志：logo 广告：banner 登陆：login 登录条：login-bar
注册：register 搜索：search 功能区：shop
标题：title 加入：join-us 状态：status 按钮：btn
滚动：scroll 标签页：tab 文章列表：list 提示信息：msg
当前的: current 小技巧：tips 图标: icon 注释：note
指南：guild 服务：service 热点：hot 新闻：news
下载：download 投票：vote 合作伙伴：partner
友情链接：link 版权：copyright
