编写出色CSS代码的13个建议,书写规范

作者: 前端知识  发布:2019-09-21

编排优秀CSS代码的10个建议

2011/12/02 · CSS · 1 评论 · 来源: 金沙澳门官网网址 ,维奇     · CSS

来源: 维奇

CSS学起来并轻巧,但在大型项目中,就变得难以管理,特别是分歧的人在CSS书写风格上稍有两样,团队上就更为难以沟通,为此计算了一部分怎么着落到实处连忙清洁的CSS代码原则:

1. 施用Reset但并不是全局Reset

昔不近来浏览器成分的暗许属性有所区别,使用Reset可重新初始化浏览器成分的片段暗中同意属性,以实现浏览器的协作。但须求小心的是,请不要选拔全局Reset:

CSS

*{ margin:0; padding:0; }

1
*{ margin:0; padding:0; }

那不但因为它是缓缓解低成效的主意,并且还有恐怕会导致部分不须要的成分也重新恢复设置了外省距和内边距。在此提出参考YUI Reset和Eric Meyer的做法。作者跟Eric迈尔的观点一样,Reset而不是铁板钉钉的,具体还供给依照项目标例外部须要求做适合的修改,以高达浏览器的极其和操作上的便利性。小编使用的Reset如下:

CSS

/** 清除内外边距 **/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构成分 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式成分 */ form, fieldset, legend, button, input, textarea, /* form elements 表单成分 */ th, td, /* table elements 表格成分 */ img/* img elements 图片成分 */{ border:medium none; margin: 0; padding: 0; } /** 设置默认字体 **/ body,button, input, select, textarea { font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } em{font-style:normal;} /** 重新恢复设置列表成分 **/ ul, ol { list-style: none; } /** 复位超链接成分 **/ a { text-decoration: none; color:#333;} a:hover { text-decoration: underline; color:#F40; } /** 重新恢复设置图片成分 **/ img{ border:0px;} /** 重新恢复设置表格成分 **/ table { border-collapse: collapse; border-spacing: 0; }

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
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td, /* table elements 表格元素 */
img/* img elements 图片元素 */{
border:medium none;
margin: 0;
padding: 0;
}
/** 设置默认字体 **/
body,button, input, select, textarea {
font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置超链接元素 **/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** 重置图片元素 **/
img{ border:0px;}
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }

2. 手不释卷的命名习贯

实实在在一无可取大概万般无奈义命名的代码,什么人看了都会抓狂。就疑似这么的代码:

CSS

.aaabb{margin:2px;color:red;}

1
.aaabb{margin:2px;color:red;}

本身想固然是初学者,也未见得会在实际上项目中那样命名多个class,但有未有想过那样的代码同样是很万分的:

XHTML

<h1>My name is <span>Wiky</span></h1>

1
<h1>My name is <span>Wiky</span></h1>

标题在于一旦您须要把具有原先浅紫蓝的书体制改善成水绿,那修改后就样式就能成为:

CSS

.red{color:bule;}

1
.red{color:bule;}

如此的命名就能很令人费解,同样的命名称叫.leftBar的侧面栏假设急需修改成右侧面栏也会很麻烦。所以,请不要选择要素的个性(颜色,地点,大小等)来命名三个class或id,您能够接纳意义的命名如:#navigation{…},.sidebar{…},.postwrap{…}

那般,无论你怎么修改定义那么些class或id的体裁,都不影响它跟HTML成分间的关系。

别的还恐怕有一种情状,一些原则性的体制,定义后就不会修改的了,那你命名时就毫无挂念刚刚说的这种状态,如

CSS

.alignleft{float:left;margin-right:20px;} .alignright{float:right;text-align:right;margin-left:20px;} .clear{clear:both;text-indent:-9999px;}

1
2
3
.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}

那么对于这么七个段子

XHTML

<p class="alignleft">作者是四个段落!</p>

1
<p class="alignleft">我是一个段落!</p>

一旦急需把那些段落由原本的左对齐修改为右对齐,那么只供给修改它的className就为alignright就能够了。

3. 代码缩写

CSS代码缩写能够抓牢你写代码的进程,精简你的代码量。在CSS里面有众多方可缩写的属性,包含margin,padding,border,font,background和颜色值等,借使您学会了代码缩写,原来如此的代码:

CSS

li{ font-family:Arial, Helvetica, sans-serif; font-size: 1.2em; line-height: 1.4em; padding-top:5px; padding-bottom:10px; padding-left:5px; }

1
2
3
4
5
6
7
8
li{
font-family:Arial, Helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding-top:5px;
padding-bottom:10px;
padding-left:5px;
}

就能够缩写为:

JavaScript

li{ font: 1.2em/1.4em Arial, Helvetica, sans-serif; padding:5px 0 10px 5px; }

1
2
3
4
li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}

一经您想更通晓这么些属性要怎么缩写,可以参见《常用CSS缩写语法计算》大概下载CSS-Shorthand-Cheat-Sheet.pdf 。

4. 利用CSS继承

如果页面中父成分的七个子成分使用一样的样式,那最棒把她们一致的体制定义在其父成分上,让它们继续那么些CSS样式。这样您能够很好的保卫安全您的代码,何况还是能减去代码量。那么自然如此的代码:

CSS

#container li{ font-family:Georgia, serif; } #container p{ font-family:Georgia, serif; } #container h1{font-family:Georgia, serif; }

1
2
3
#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

就能够简写成:

CSS

#container{ font-family:Georgia, serif; }

1
#container{ font-family:Georgia, serif; }

5. 选取多种选拔器

您能够统一三个CSS选用器为二个,借使他们有同步的体制的话。那样做不独有代码简洁且可为你节省时空。如:

CSS

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

1
2
3
h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

能够统一为

CSS

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

1
h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

(相关阅读:《32个最常用CSS采取器剖判》)

6. 适度的代码注释

代码注释能够让外人更易于读懂你的代码,且客观的团队代码注释,可使得社团越发清晰。你能够挑选做的样式表的早先加多目录:

CSS

/*------------------------------------ 1. Reset 2. Header 3. Content 4. SideBar 5. Footer ----------------------------------- */

1
2
3
4
5
6
7
/*------------------------------------
1. Reset
2. Header
3. Content
4. SideBar
5. Footer
----------------------------------- */

诸如此比你代码的结构就一览精晓,你能够轻易的物色和修改代码。

而对此代码的主内容,也应适当的加以划分,乃至在有要求的地点在对代码加以注释表达,那样也惠及共青团和少先队开荒:

CSS

/*** Header ***/ #header{ height:145px; position:relative; } #header h1{ width:324px; margin:45px 0 0 20px; float:left; height:72px;} /*** Content ***/ #content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;} #content h1{color:#F00}/* 设置字体颜色 */ #content .posts{ overflow:hidden; } #content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; } /*** Footer ***/ #footer{ clear:both; padding:50px 5px 0; overflow:hidden;} #footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

1
2
3
4
5
6
7
8
9
10
11
/*** Header ***/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left; height:72px;}
/*** Content ***/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content h1{color:#F00}/* 设置字体颜色 */
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }
/*** Footer ***/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

 

7. 给你的CSS代码排序

假诺代码中的属性都能依照字母排序,这查找修改的时候就能够进一步便捷:

CSS

/*** 样式属性按字母排序 ***/ div{ background-color:#3399cc; color:#666; font:1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

1
2
3
4
5
6
7
8
9
10
11
/*** 样式属性按字母排序 ***/
div{
background-color:#3399cc;
color:#666;
font:1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}

8. 保持CSS的可读性

书写可读的CSS将会使得更易于物色和更换样式。对于以下二种情况,哪一种可读性更加高,小编想不言而明。

CSS

/*** 各种样式属性写一行 ***/ div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; } /*** 全部的体制属性写在一直以来行 ***/ div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

1
2
3
4
5
6
7
8
9
10
11
12
13
/*** 每个样式属性写一行 ***/
div{
background-color:#3399cc;
color:#666;
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}
/*** 所有的样式属性写在同一行 ***/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

当对于有个别样式属性比较少的接纳器,小编会写到一行:

CSS

/*** 选拔器属性少的写在平等行 ***/ div{ background-color:#3399cc; color:#666;}

1
2
/*** 选择器属性少的写在同一行 ***/
div{ background-color:#3399cc; color:#666;}

对于这么些法则并不是硬性规定,但不管你使用哪一种写法,作者的建议是一向维持代码一致。属性多的子集团写,属性少于3个能够写一行。

9. 增选更优的体制属性值

CSS中稍加属性接纳不一致的属性值,就算抵达的效用大概,当质量上却存在着距离,如

分别在于border:0把border设为0px,即便在页面上看不见,但按border暗许值驾驭,浏览器依旧对border-width/border-color举行了渲染,即现已占据了内部存款和储蓄器值。

而border:none把border设为“none”即未有,浏览器分析“none”时将不作出渲染动作,即不会消耗内部存储器值。所以提议采纳border:none;

同一的,display:none隐敝对象浏览器不作渲染,不占用内存。而visibility:hidden则会。

10. 应用代替@import

第一,@import不属于XHTML标签,亦不是Web标准的一有些,它对于较先前时代的浏览器包容也不高,而且对于网址的属性有某个负面包车型客车影响。具体能够参照《高品质网址设计:不要选拔@import》。所以,请幸免采用@import

11. 运用外部样式表

本条原则始终是三个很好的宏图实施。不单能够更便于维护修改,更主要的是使用外部文件能够狠抓页面速度,因为CSS文件都能在浏览器中生出缓存。内置在HTML文书档案中的CSS则会在每趟需求中随HTML文书档案重新下载。所以,在实际应用中,无需把CSS代码内置在HTML文书档案中:

CSS

<style type="text/css" >     #container{ .. }     #sidebar{ .. } </style>

1
2
3
4
<style type="text/css" >
    #container{ .. }
    #sidebar{ .. }
</style>

XHTML

<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

1
<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

而是利用<link>导入外界样式表:

CSS

<link rel="stylesheet" type="text/css" href="css/styles.css" />

1
<link rel="stylesheet" type="text/css" href="css/styles.css" />

12. 幸免选用CSS表明式(Expression)

CSS表明式是动态设置CSS属性的壮大(但惊恐)方法。Internet Explorer从第5个本子初始协理CSS表达式。上边包车型地铁例证中,使用CSS表明式能够兑现隔三个钟头切换贰遍背景颜色:

CSS

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

1
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

如上所示,expression中使用了JavaScript表明式。CSS属性依据JavaScript表明式的图谋结果来设置。

表明式的难题就在于它的图谋频率要比大家想像的多。不独有是在页面显示和缩放时,正是在页面滚动、以至移动鼠标时都会要重新总结一遍。给CSS表明式扩张二个计数器能够追踪表达式的持筹握算频率。在页面中不管移动鼠标都足以轻便达到一千0次以上的总结量。

一经非得利用CSS表明式,应当要切记它们要总结成千上万回况兼可能会对您页面包车型客车天性发生耳闻则诵。所以,在非不得已,请幸免采纳CSS表明式。

  13. 代码压缩

当您说了算把网址项目布局到互连网上,那你将在思虑对CSS进行削减,出去注释和空格,以使得网页加载得越来越快。压缩您的代码,能够采用局地工具,如YUI Compressor

采纳它可精简CSS代码,减少文件大小,以得到越来越高的加载速度。

14. 总结

在本文中,小编努力更详实的总计书写更连忙的CSS代码的规范,但由于笔者见识和精力有限,小编依旧希望那一个规范能协理你越来越好的书写和管理您的CSS代码,不知你又是怎么样下笔CSS的,是还是不是也是有部分想要分享的技能?给本身留言吗多谢~

 

赞 5 收藏 1 评论

金沙澳门官网网址 1

1. 比不上浏览器成分的暗许属性有所不一致,使用Reset可复位浏览器成分的一部分默许属性,以完成浏览器的相当。
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
/* structural elements 结构成分 */
dl, dt, dd, ul, ol, li,
/* list elements 列表成分 */pre,
/* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea,
/* form elements 表单元素 */
th, td,
/* table elements 表格成分 */
img/* img elements 图片成分 */
{   border:medium none;   margin: 0;   padding: 0; }
/** 设置私下认可字体 **/body,button, input, select, textarea
{   font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;} /** 重新设置列表成分 **/
ul, ol { list-style: none; }
/** 重新初始化超链接成分 **/a
{ text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** 重新恢复设置图片成分 **/img{ border:0px;}
/** 重新恢复设置表格成分 **/
table { border-collapse: collapse; border-spacing: 0; }

  1. 大好的命名习贯

  2. 代码缩写
    li{   
    font-family:Arial, Helvetica, sans-serif;
        font-size: 1.2em;
        line-height: 1.4em;  
      padding-top:5px;  
      padding-bottom:10px;  
    padding-left:5px;
    }
    变成
    li{  
      font: 1.2em/1.4em Arial, Helvetica, sans-serif; 
       padding:5px 0 10px 5px;
    }

  3. 利用CSS继承
    倘若页面中父成分的八个子成分使用同样的体裁,那最棒把她们同样的样式定义在其父成分上,
    让它们继续那个CSS样式。
    这么您可以很好的护卫你的代码,並且还是能减掉代码量。那么自然如此的代码:
    #container li{ font-family:Georgia, serif; }
    #container p{ font-family:Georgia, serif; }
    #container h1{font-family:Georgia, serif; }
    #container{ font-family:Georgia, serif; }

  4. 行使多种采纳器
     
    你可以统一多个CSS选取器为叁个,假若她们有一块的体裁的话。
    那样做不唯有代码简洁且可为你节省时空。如:
    h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
    h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
    h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
    能够统一为
    h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

  5. 方便的代码注释

  6. 给你的CSS代码排序
     
    假诺代码中的属性都能遵照字母排序,那查找修改的时候就能够更上一层楼飞速:

/*** 样式属性按字母排序 ***/
div{    
background-color:#3399cc;  
  color:#666;  
  font:1.2em/1.4em Arial, Helvetica, sans-serif;
    height:300px; 
   margin:10px 5px;  
padding:5px 0 10px 5px; 
   width:30%;  
  z-index:10;
}

本文由金沙澳门官网发布于前端知识,转载请注明出处:编写出色CSS代码的13个建议,书写规范

关键词: 金沙澳门官网