Css编码规范 Html编码规范 Css类名约定…

Css编码规范

总结笔记

1.左花括号前添加空格,右花括号单独成行,声明 : 后插入空格
2.为选择器分组时,将单独的选择器单独放在一行
3.小写字母加连字符(不是下划线,也不是驼峰命名法)
4.需在js中使用的类名以 J_ 开头,接“大驼峰”命名,这类的class不能出现在CSS文件中
5.排列顺序
定位(position、left、right、top、bottom、z-index)
盒子模型(display、float、width、height、margin、padding、border、border-radius)
排印(font、color、background、line-height、text-align

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<input type="text" class="J_UserType_Email">
<style>
.selector,
.mod-example {
/* 定位 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* 盒模型 */
display: block;
float: right;
width: 100px;
height: 100px;
margin: 15px auto;
padding: 10px 15px;
border: 1px solid #ccc;
/* 排印 */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
background-color: #f5f5f5;
text-align: center;
}
</style>

Html编码规范

1.使用简单的doctype
2.统一使用utf-8
3.html元素上指定lang属性
4.指定什么版本的IE渲染页面
5.引入css、js不需要指明type
6.缩进使用两个空格
7.标签属性名统一小写
8.属性引号用双引号
9.Boolean 属性指不需要声明取值的属性
10.自定义属性必须以 data- 为前缀
11.HTML属性顺序按class、id、name、data-*…顺序出现
12.不要在自动闭合标签的结尾处使用斜线
13.id命名,当作为 JS 钩子使用 时,以 J_ 为前缀,后面接大驼峰命名
14.html代码中不能出现任何关于业务相关敏感信息的注释

建议结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta lang="zh">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="description" content="">
<meta name="keyword" content="">
<title>demo</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<input type="text" disabled>
<a class="..." id="..." data-modal="toggle" href="#">
<script src="example.js"></script>
</body>
</html>

Css类名约定[建议]

个人总结,利用约定规则进行css命名空间冲突解决

一级类名
全局

1
#[PROJECT]-g-[module]

页面

1
#[PROJECT]-[page]-[module]

页面组件

1
.[PRJECT]-[page]-[module]

其中PRJECT为项目标志,g为全局标志,page为页面标志,module为特定模块

项目为YT,header模块公共

1
.YT-g-header{}

项目为YT,header不公共,且header里有多种情况,这时候就需要分页面去做

1
.YT-index-header.YT-index-mobile{}

二级类名

1
[module]-[detail]

其中module为模块标志,detail为细节模块标志,

1
2
3
.header[Top,Bottom,left,right,Nav...] 
.conter[Top,Bottom,Left,Right,Mid...]
.footer[Top,Bottom,left,right...]

更多情况

1
.[module]-[detail].[detailA,detailB,detailC...]

三级四级类名
[detail] 只要同级别之间不重复命名即可

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="YT-g-header YT-index-header YT-index-mobile"></div>
<div class="YT-g-header YT-index-trade"></div>
<div class="YT-index-conter YT-index-mobile">
<div class="conter-top dog none">
<span></span>
</div>
<div class="conter-top cat">
<a href ="#" class="spat"></a>
<b class="name"></b>
<p class="desp"></p>
</div>
<div class="conter-mid"></div>
<div class="conter-bottom"></div>
</div>
<div class="YT-index-conter YT-index-trade"></div>
<div class="YT-g-footer YT-index-mobile"></div>
<div class="YT-g-footer YT-index-trade"></div>

pub-g.css一旦定下来,非common的元素类不要写进去,有特殊写在当前page的css里 通过增加.[PROJECT]-[PAGE]-[MOD]即可覆盖改写或者增加当前样式或者子元素样式。

欢迎交流转载请注明出处