前端代码标准最佳实践:CSS篇
来源:互联网 发布:csgo怎么看竞技数据 编辑:程序博客网 时间:2024/06/14 21:53
上一篇《前端代码标准最佳实践:javascript》发表后,大家讨论还是很热烈,从侧面体现了前端工程师对写标准的前端代码的重视程度很高。这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能。那么接着上一篇,我们再来谈谈CSS代码的一些标准实践。
1,命名
和其他语言规范一样,css的命名也讲究命名要有意义,命名要尽可能短但是要足够表达含义;命名的词用连字符连接。
不规范的命名:
?
1
2
3
4
5
6
#navigation{
}
.demoimage{
}
.error_status{
}
规范的命名:
?
1
2
3
4
5
6
#nav{
}
.demo-image{
}
.error-status{
}
2, css选择器
不同的标签类型尽可能不用相同的css类名;尽可能不用标签类型选择器,用css类名和ID足够定义css,因为ID是可以唯一确定Dom元素的,而css类是不推荐用于不同的标签的;另外应该少用ID选择器定义,因为ID的唯一性使得定义的css无法重用。
不规范定义:
?
1
2
3
4
ul#menus{
}
div.info{
}
规范定义:
?
1
2
3
4
.main-menus{
}
.info{
}
3,属性名称和值的定义精简
css的某些属性定义可以可以分拆为各个独立项,比如padding,border, margin, background, font等,虽然分拆定义的可读性会好一些,但是就目前的经验来看,前端工程师们对这些常用的css理解程度足够好,合并后的定义不会对可读性带来影响,反而代码更简洁;此外对属性值为0的单位可以省略,在0后面添加入px em cm等单位是毫无意义的;对小数值可以省略小数点前的0;url值两端的引号可以省略。
不规范的定义:
?
1
2
3
4
5
6
7
8
9
10
border-top-style
:
none
;
font-family
: palatino, georgia,
serif
;
font-size
:
100%
;
line-height
:
1.6
;
padding-bottom
:
2em
;
padding-left
:
1em
;
padding-right
:
1em
;
padding-top
:
0
;
margin
:
0.8em
;
background
:
#00FF00
url
(
'bgimage.gif'
)
no-repeat
fixed
top
;
规范定义:
?
1
2
3
4
5
border-top
:
0
;
font
:
100%
/
1.6
palatino, georgia,
serif
;
padding
:
0
1em
2em
;
margin
: .
8em
;
background
:
#00FF00
url
(bgimage.gif)
no-repeat
fixed
top
;
4,css代码的格式
漂亮统一的代码格式可以提高代码的可读性和可维护性,css的最佳代码格式主要有以下几点:定义顺序以字母序排列,不考虑浏览器前缀;定义以分号结束;属性名称定义的分号后添加一个空格;多个选择器定义时,每个定义单独占一行。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*css定义顺序以字母序排列;结束用分号;属性名称与值之间添加空格*/
background
:
fuchsia
;
border
:
1px
solid
;
-moz-border-radius:
4px
;
-webkit-border-radius:
4px
;
border-radius:
4px
;
color
:
black
;
text-align
:
center
;
text-indent
:
2em
;
/*多个选择器定义时,每个选择器单独占用一行*/
h
1
,
h
2
,
h
3
{
font-weight
:
normal
;
line-height
:
1.2
;
}
5,避免写兼容某个浏览器的css代码
避免写特定浏览器兼容代码,这里说的特定浏览器主要指的是万恶的IE系列浏览器,IE6,7尤为严重。碰到浏览器兼容问题,首先考虑的是能否换一种其它的解决方案,如果没有合适的解决方案,记得单独写一个css文件给这些特定的浏览器,不要把兼容代码和常规代码混合,这样方便代码的维护,如果后期不支持这些老旧浏览器,可以直接删除这些单独的css文件即可。
?
1
2
3
4
5
6
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
6,记住块元素和行内元素的区别,避免写无用的css代码
块级元素显示会独占一行,而行内元素不会独占一行。常见的块级元素有:div p ul ol table h1~h6 等;行内元素有:a em img input label select span strong textarea等。块级元素的display默认样式是block,而行内元素是inline,可以通过重新定义display来互转块级元素和行内元素。但是记住以下的css样式对行内元素是无效的:width height 和垂直方向设置的margin padding,所以避免给行内元素定义这些无用的样式。
7,记住css定义的权重
css的选择器是有权重的,当有多个样式时,权重高的样式会起作用。说一个插曲,前段时间面试了不少前端工程师,问得最多的一个问题就是css权重问题,很可惜的是知道css权重的不多。以下是权重的规则:标签的权重为1,class的权重为10,id的权重为100,以下例子是演示各种定义的权重值:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*权重为1*/
div{
}
/*权重为10*/
.class
1
{
}
/*权重为100*/
#id
1
{
}
/*权重为100+1=101*/
#id
1
div{
}
/*权重为10+1=11*/
.class
1
div{
}
/*权重为10+10+1=21*/
.class
1
.class
2
div{
}
如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现,因为光是靠前后的样式定义来影响最终的样式是不靠谱的,也会给后期的维护埋下一个雷区;另外为了代码的重用性,应尽可能定义小的权重,这和不推荐使用id来定义样式是一样的道理。
8,使用css reset
各个浏览器对不同的标签有其不同的内置的样式,为了使得在不同的浏览器下标签的表现相同,可以定义一个单独的base.css文件,重新定义各种标签的默认样式。另外推荐的css文件组织是:定义一个base.css,用于css reset,定义一个common.css,用于定义各种公用css类。这里有一份base.css,其实是以上提到的base.css和common.css的合并,分享给大家:base.css
9,多组合少继承
这种设计方式越来越受到大家的欢迎,各种前端框架中也能看到大量这样的设计。设计的核心思想是:把css定义中的固定部分和可变部分分开定义,使得代码达到最大程度的重用,这样的结果是增加了元素上添加的css类个数,但是提高了代码的维护性和可读性。如下的例子代码来自bootstrap的按钮样式定义
按钮有一个固定的基础样式btn
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.btn {
display
: inline-
block
;
*
display
:
inline
;
padding
:
4px
10px
4px
;
margin-bottom
:
0
;
*
margin-left
: .
3em
;
font-size
:
13px
;
line-height
:
18px
;
*
line-height
:
20px
;
color
:
#333333
;
...
*zoom:
1
;
-webkit-box-shadow:
inset
0
1px
0
rgba(
255
,
255
,
255
,
0.2
),
0
1px
2px
rgba(
0
,
0
,
0
,
0.05
);
-moz-box-shadow:
inset
0
1px
0
rgba(
255
,
255
,
255
,
0.2
),
0
1px
2px
rgba(
0
,
0
,
0
,
0.05
);
box-shadow:
inset
0
1px
0
rgba(
255
,
255
,
255
,
0.2
),
0
1px
2px
rgba(
0
,
0
,
0
,
0.05
);
}
在此基础上定义各种按钮的特定样式
?
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
28
29
30
31
32
33
34
35
36
37
38
39
40
.btn.disabled,
.btn[disabled] {
cursor
:
default
;
background-color
:
#e6e6e6
;
background-image
:
none
;
opacity:
0.65
;
filter: alpha(opacity=
65
);
-webkit-box-shadow:
none
;
-moz-box-shadow:
none
;
box-shadow:
none
;
}
.btn-
large
{
padding
:
9px
14px
;
font-size
:
15px
;
line-height
:
normal
;
-webkit-border-radius:
5px
;
-moz-border-radius:
5px
;
border-radius:
5px
;
}
.btn-
large
[class^=
"icon-"
] {
margin-top
:
1px
;
}
.btn-
small
{
padding
:
5px
9px
;
font-size
:
11px
;
line-height
:
16px
;
}
.btn-
small
[class^=
"icon-"
] {
margin-top
:
-1px
;
}
.btn-mini {
padding
:
2px
6px
;
font-size
:
11px
;
line-height
:
14px
;
}
另外再推荐一下bootstrap框架,在github中排名第一的前端框架,出自于twitter。
10,雪碧图(css sprite)
这项技术是将多张背景图合并为一张,然后通过设置不同的background-position属性来展示不同的背景。现在越来越多的网站采用这项技术,例如:亚马逊,苹果,Google, YouTube等,我们目前的项目MSB也部分使用了这些技术。其优点是减少http请求背景图的次数,降低服务器的压力,页面的背景图能同时出现,避免出现空白背景。缺点是不好维护,另外有试验的结果显示会稍微影响渲染的速度,因为要计算position,但是其优点大于缺点,尤其是网站的背景图多的时候。现在也有多个工具可以帮助我们自动合并背景图和生成相应的background-position。
原文转自:乐搏学院http://www.learnbo.com/
- 前端代码标准最佳实践:CSS篇
- 前端代码标准最佳实践:CSS篇
- 前端代码标准最佳实践:CSS
- 前端代码标准最佳实践:CSS
- 前端代码标准最佳实践:CSS
- 前端代码标准最佳实践:CSS
- 前端代码标准最佳实践:javascript篇
- 前端代码标准最佳实践:HTML篇
- 前端代码标准最佳实践:javascript篇
- 前端代码标准最佳实践:HTML篇
- 前端代码标准最佳实践:HTML篇
- 前端代码标准最佳实践:javascript篇
- 前端代码标准最佳实践:HTML篇
- 前端代码标准最佳实践:javascript篇
- 前端代码标准最佳实践:javascript篇
- 前端代码标准最佳实践:HTML篇
- 前端代码标准最佳实践:javascript篇
- 前端代码最佳实践
- 『推荐系统实战——王亮』阅读笔记
- 前端代码标准最佳实践:HTML篇
- stm32的μC/OS-II(μcosii)系统任务挂起、恢复、创建、删除
- ZooKeeper原理及使用
- 使用SQL developer 连接数据库
- 前端代码标准最佳实践:CSS篇
- 安卓帧动画
- 密集匹配之半全局匹配SGBM
- MySQL基本操作
- SQLite入门(一)
- Spring 注解 @ResponseBody
- 【目标识别】深度学习进行目标识别的资源列表
- 简单安全高效的Java计数器
- 前端代码标准最佳实践:javascript篇