黑马程序员技术交流社区

标题: CSS编码规范 [打印本页]

---

作者: 月亮是我掰弯的    时间: 2016-10-12 13:48
标题: CSS编码规范
CSS代码风格规则CSS代码有效性

使用有效的CSS代码。

可使用W3C CSS validator来验证css。

命名

class应优先虑以这元素具体目的来进行命名，应尽量简短且富有含义。

统一采用小写英文字母、数字、“-” 的组合。其中不得包含汉字、空格和特殊字符。

1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
   
2. .demoimage {}  /* "demo" 和 "image" 中间没加 "-" */</font>

复制代码

1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
   
2. .error_status {}  /* 用下划线 "_" 是屌丝的风格 */</font>

复制代码

1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
   
2. .ads-sample {}</font>

复制代码

原则上，不建议缩写，除非一看就懂的缩写，如nav。

尽量避免使用id来控制样式。

框架css类命名清单

• 全屏：full_bg（全屏背景）
• 容器：wrapper（最外面的主框架）
• 页头：header（子项：h_1、h_2、……）
• 内容：container
• 页面主体：main
• 页尾：footer
• 导航：nav（子项：n_1、n_2、……）
• 菜单：menu（子项：m_1、m_2、……）
• 导航：nav（子项：n_1、n_2、……）
• 子菜单：submenu
• 侧栏：sidebar
• 栏目：column（扩展：column1、column2、……）
• 左右中：left、right、center
• 搜索：search
• 登陆：signin
  
• 
  
  

选择器

避免出现过多的祖先选择器，各浏览器会有性能差异，消耗在选择器的时间也不尽相同。

尽量最多控制在3级以内。

1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
   
2. ul.example {}
   
3. .example1 .example2 .example3 .example4 {}</font>

复制代码

1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
   
2. .example {}
   
3. .example1,
   
4. .example2 {}</font>

复制代码

非必要的情况下不要使用元素标签名和ID或class进行组合。

1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
   
2. ul#example {}
   
3. div.error {}</font>

复制代码

1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
   
2. #example {}
   
3. .error {}</font>

复制代码

简化css

写属性值的时候尽量使用缩写。

1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
   
2. .example {
   
3.   border-top-style:none;
   
4.   font-family:Palatino, serif;
   
5.   font-size:100%;
   
6.   line-height:1.6;
   
7.   padding-bottom:2em;
   
8.   padding-left:1em;
   
9.   padding-right:1em;
   
10.   padding-top:0;
    
11. }</font>

复制代码

1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
   
2. .example { border-top: none; font: 100%/1.6 Palatino, serif; padding: 0 1em 2em;}</font>

复制代码

属性值为0时，忽略单位

1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
   
2. .example { margin:0px; padding:0px;}</font>

复制代码

1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
   
2. .example { margin:0; padding:0;}</font>

复制代码

属性值出现小数点忽略0

1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
   
2. .example { font-size:0.8em}</font>

复制代码

1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
   
2. .example { font-size:.8em}</font>

复制代码

省略URI外的引号

1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
   
2. .example { background-image: url("images/noise.png");}</font>

复制代码

1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
   
2. .example { background-image: url(images/noise.png);}</font>

复制代码

十六进制尽可能使用3个字符

1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
   
2. .example { color: #eebbcc; }</font>

复制代码

1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
   
2. .example { color: #ebc; }</font>

复制代码

Hacks

尽可能地避免使用hack的方式解决浏览器样式兼容性问题。

尽量避免使用CSS filters。

CSS代码格式规则单行书写

一个类一行，每个属性间用空格隔开，不用强制换行。

1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
   
2. .example {
   
3.   display:block;
   
4.   float:left;
   
5.   width:200px;
   
6.   height:300px;padding:10px;
   
7. }</font>

复制代码

1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
   
2. .example { display: block; float: left; width: 200px; height: 300px; padding: 10px;}</font>

复制代码

分隔选择器

每个选择器和声明都要独立新行。

1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
   
2. a:focus, a:active { position: relative; top: 1px;}</font>

复制代码

1. /* 推荐 */
   
2. h1,
   
3. h2,
   
4. h3 { font-weight: normal; line-height: 1.2;}

复制代码

属性名完结

出于一致性的原因，在属性名和值之间加一个空格（可不是属性名和冒号之间噢）。

1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
   
2. h3 { font-weight:bold;}</font>

复制代码

1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
   
2. h3 { font-weight: bold; }</font>

复制代码

声明完结

考虑到一致性和拓展性，请在每个声明尾部都加上分号。

1. <font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
   
2. .test {
   
3.   display: block;
   
4.   height: 100px
   
5. }</font>

复制代码

1. <font color="rgb(51, 51, 51)" size="3">/* 推荐 */
   
2. .test { display: block; height: 100px;}</font>

复制代码

css书写顺序

书写顺序按显示属性，自身属性， 文本属性顺序。

显示属性

• display
• list-style
• position
• float
• clear
  
  

自身属性

• width
• height
• margin
• padding
• border
• background
  
  

文本属性

• color
• font
• text-decoration
• text-align
• vertical-align
• white-space
  
  

Css Meta规则编码

一般情况下编码同html的一致。

如果是urf-8，则不需要制定样式表的编码，因为它默认为urf-8。

注释头部注释

注明本CSS的用处，生成时间及作者等信息。

1. <font color="rgb(51, 51, 51)" size="3">/* CSS Document  
   
2. Use for:    website  
   
3. Version:    1.0
   
4. Date:      time
   
5. Author:     your name
   
6. Update:      
   
7. */</font>

复制代码

页面注释

有时候一份CSS会把首页和各种二级页面样式写在一起，这时需要做页面注释。

1. <font color="rgb(51, 51, 51)" size="3">/***********************************
   
2. * 首页
   
3. ***********************************/</font>

复制代码

分级注释

比如在main模块下，建立了news、photo等栏目，可使用分级注释，以指明层级结构。

1. <font color="rgb(51, 51, 51)" size="3">/*----------------main-----------------*/
   
2. #main {}
   
3. .main-bg {}
   
4. 
   
5. /* news */
   
6. .news {}
   
7. 
   
8. /* photo */
   
9. .photo  {}</font>

复制代码

区块间注释

1. <font size="3">/* news */
   
2. .news {}
   
3. 
   
4. /* photo */
   
5. .photo  {}</font>

复制代码

修改注释

当后期维护中有修改到css，需添加修改的注释。

1. <font color="rgb(51, 51, 51)" size="3">.news {} /* 修正横向滚动条错误 by your name */</font>

复制代码

---

作者: Jonlin    时间: 2016-10-14 09:16
先收藏吧！

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2