首页技术文章正文

Web前端开发培训之CSS编码规范

更新时间:2017-04-14 来源:黑马程序员Web前端培训学院 浏览量:

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

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

修改注释

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


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


本文版权归黑马程序员web前端开发学院所有,欢迎转载,转载请注明作者出处,谢谢!
作者:黑马程序员web前端培训学院;
首发:http://www.itheima.com/news/web.html 
分享到:
在线咨询 我要报名
和我们在线交谈!