教育行业A股IPO第一股（股票代码 003032）

全国咨询/投诉热线：400-618-4000

天富娱乐登录官方入口 Web前端开发培训之CSS编码规范

更新时间:2016年11月23日14时40分 来源:传智播客新普京网址多少学院 浏览次数:

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 {}
  5. /* news */
  6. .news {}
  8. /* photo */
  9. .photo  {}</font>
复制代码

区块间注释
  1. <font size="3">/* news */
  2. .news {}
  4. /* photo */
  5. .photo  {}</font>
复制代码

修改注释

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


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


本文版权归传智播客web前端开发学院所有，欢迎转载，转载请注明作者出处，谢谢！
作者：传智播客web前端培训学院；
首发：http://tianfu2024.sbs/web/ 
0 分享到：
和我们在线交谈！