JavaEE
鸿蒙应用开发
HTML&JS+前端
Python+大数据开发
人工智能开发
电商视觉设计
软件测试
新媒体+短视频
产品经理
集成电路应用开发
C/C++
狂野架构师
IP短视频
UI培训之WEB前端规范---CSS规范
更新时间:2016年03月26日10时41分 来源:传智播客UI培训学院 浏览次数:
由于每个WEB开发者的编码风格不同，差异较大，为了便于代码压缩以及书写样式的规范统一和美观，web前端工程师总结了一些前端规范，这里主要介绍CSS相关规范。
1. tab键用四个空格代替
因为在不同系统的编辑工具对tab解析不一样，windows下的tab键是占四个空格的位置，而在linux下会变成占八个空格的位置。
2.每个样式属性加英文分号“;”
方便压缩工具"断句"。
3. Class命名中不能出现大写字母，采用"-"对class中的字母分隔
/* 正确的写法 */
.hotel-title {
font-weight: bold;
}
/* 不推荐的写法 */
.hotelTitle {
font-weight: bold;
}
4.空格的使用，执行下列规则：
.hotel-content {
font-weight: bold;
}
选择器与 { 之前要有空格
属性名的 : 后要有空格
属性名的 : 前不能加空格
一方面为了美观，另一方面是避免ie6的bug
5.多选择器规则之间要换行
当样式针对多个选择器时每个选择器占一行
/* 推荐的写法 */
a.btn,
input.btn,
input[type="button"] {
......
}
6. 不能将样式写为单行
.hotel-content {margin: 10px; background-color: #efefef;}
单行显示不便于注释和备注
7. 不要向 0 后添加单位（为了规范统一）
.obj {
left: 0px;
}
8. 不要使用css原生import
使用css原生import有很多弊端，比如会增加请求数
9. 属性的正确书写顺序
.hotel-content {
/* 定位 */
display: block;
position: absolute;
left: 0;
top: 0;
/* 盒模型 */
width: 50px;
height: 50px;
margin: 10px;
border: 1px solid black;
/ *其他* /
color: #efefef;
}
•定位相关，常见的有：display position left top float 等
•盒模型相关，常见的有：width height margin padding border 等
•其他属性
按照这样的顺序书写可见提升浏览器渲染dom的性能
10. 小图片要与sprite 合并
11.当编写针对特定html结构的样式时，使用元素名 + 类名
/* 所有的nav都是针对ul编写的 */
ul.nav {
......
}
12. IE Hack List
/* 针对ie的hack */
selector {
property: value; /* 所有浏览器 */
property: value\9; /* 所有IE浏览器 */
property: value\0; /* IE8 */
+property: value; /* IE7 */
_property: value; /* IE6 */
*property: value; /* IE6-7 */
}
13. ie不要使用filter，也不要使用expression
这里主要是为了注重效率
14.不要使用行内（inline）样式
<p style="font-size: 12px; color: #FFFFFF">W3Cfuns</p>
行内样式，最好用一个class代替。隐藏某个元素，可以加一个class
.hide {
display: none;
}
尽量做到样式和结构分离
15. 使用reset.css样式
16.不要全局设置magin和padding
/*别这样写*/
* {
margin: 0;
padding: 0;
}
没有必要将所有元素的margin、padding值都置为0。
17. 链接的样式，要按照这个顺序来书写
a:link -> a:visited -> a:hover -> a:active
(F8H3IKU(@43DQ[32YWO.png)
最新资讯
0
分享到：
江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2024 All Rights Reserved 苏ICP备16007882号营业执照增值电信业务经营许可证出版物经营许可证
苏公网安备 32132202001156号