测试下下睛睛睛上工工
发布于 2年前 作者 niued 847 次浏览

一、Css全局规范

1.在样式表开头添加一个注释块,用以描述这个样式表的 编码格式 最后的修改时间 标记等备注信息

/* *charset:UTF-8 *Time:2012-05-05 *Copyright © 2012 www.uzai.com All rights reserved */

2.文件名规范
  • base.css 为css样式重置和一些公用的css

  • layout.css 为网站上所有公用的js组件、公用模块都写在这个css样式表中

  • index.css 为首页的样式表

  • page.css 为一些产品页 线路页的css样式表

说明:初期建立的时候按照这个来建立,等后期网站基本上完成可以考虑对base.css layout.css等进行合并为一个css global.css文件。在开发当中也可以为一些特殊的页面单独建立css文件。

Global.css文件说明: 在样式表的头部,对公用css属性默认值清零操作:

/----start resrt----/ 代码… /----end reset----/

在样式表的头部对body的背景 、文本、字体、行高、全局链接等进行设置

/----start base----/ 代码… /----end base----/

在样式表中间书写网站公用模块样式

/----start layout----/ 代码… /----end layout----/

在样式表底部书写网站公用JS组件样式

/----start js----/ 代码… /----end js----/

说明:css代码模块化对后期的维护和添加新的css都非常有帮助。在新增加css的时候一定要找到当前模块进行添加,拒绝代码乱添加给之后的维护带来很大的困扰。

3.Css注释

大模块我们可以采用这种注释方法:

/----start main----/

/----end main----/

大模块里面的模块可以采用这种注释:

/–start left–/

/–start left–/

最小级的模块注释:

/start submenu/

/end submenu/

针对后期的维护修改等可以采用这种注释:

/name 2012-05-05/

说明:注释最好采用英文,尽量避免中文注释,采用这种递减的方式写注释使得我们的css一目了然,结构清晰,看到css注释基本上能想起html的结构。最多使用3级注释,注释以模块为一单位书写。最后一种注释为修改者名字和修改日期,可能考虑到程序员添加的css和后期维护新加的css

4.Css引用

css都采用外链引用方式:<link href=”” type=”text/css” rel=”stylesheet” />

或者写在头部<style type=”text/css”>代码。。。。。</css>(针对一些会刊 专辑)

特别注意:坚决避免使用内嵌式方式写css :

可维护性差。

二、Css命名规范

1.考虑到团队合作,因此CSS命名必须规范,避免开发中造成命名冲突等。
2.Css命名语义化,如:

常用名称:

头: header  尾: footer  Logo: logo  版权: copyright  内容块: content(A) 栏目块:column  结构左: left 结构中: center

结构右:right 矩阵导航:matrixNav 首页导航:indexNav 频道二级:channelNav 导航文字:navText 内容导航:nav 下拉:drop

内容主导航:mainNav 子内容导航:subNav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 广告:ad 按钮:btn

搜索:search 关键字:keyWord 标签:tag 菜单:menu 滚动:scroll 列表:list 打印:print 地图:map 博客:blog 视频:video

登陆:login 登录条:loginbar 注册:reg 提示信息:msg 功能区:shop Flash:flash 标题:title 更多:more 热点:hot 评论:review

媒体:media 新闻:news 合作:cooperate 联系:contact 加入我们:joinUs 合作伙伴:partner 友情链接:link 论坛社区:club

投票:vote 摘要:summary 服务:service 指南:guild 描述:description 信息:info 下载:download 价格:price 状态:status 注释:note

地址:address 产品:products 跳转:jump 条:bar 线:line 小技巧:Tips 外套:wrap

这基本上是每个网站常用的模块化命名。

3.针对我们网站的命名:
  1. 网站通用模块组件使用:使用fn-开头来命名,例如:翻页模块命名:class=”fn-page”菜单模块命名:class=”fn-menu”

  2. 针对网站头部,尾部,内容部分这样框架化的层可以采用ID命名方式 例如:id=”header” id=”footer” id=”content”

  3. 针对为JS预留的接口,JS组件使用如下方式:Id=“Js_show” class=“Js_hide”等方式

  4. (共同)针对模块 我们采用如下方式:模块+功能的命名方式 如:Class=”page” class=”page-tips” class=”page-list-news”或者class=”pageTips”驼峰式命名

  5. 对我们常用的一些css采用如下命名:p-clear p-clearfix p-font12的方式命名

  6. 避免 css hack , 考虑使用特定浏览器前缀表示:.ks-ie6 p {margin: 1em 0;}以上是大体结构上的命名方式,在一些命名的细节中我们还应该注意一些问题:

  7. id和class使用,ID为唯一的,因此我们在大的结构上才采用ID,一般就是使用class来命名,也易于通用。

  8. 我们为class命名的时候还应该注意语义化,简明化。尽量使用一些英文单词的组合(类别+功能;属性+值等) 如:font24 width990 header footer js-show .ff60cc等命名,一看就很明了,知道是什么意思。避免使用英文拼音命名。

总结:这样的css命名规范,为我们了解网站和后期维护 新同事的加入学习提供了很大的便利。如通用模块命名 fn-XXX 看到这个就知道这个是整个网站通用的css 放在global里面的 js-XX一看到这个就知道这是为JS预留的。这样就对整个网站有个很清晰的了解,通过css命名等细节问题,使开发者更有利的了解网站,维护等。较现在比较混乱无序的命名来说,在各方面都提高了不少。

三、Css代码书写规范

1.css的缩写规则
  • 不同类有相同属性及属性值的书写,如.a,.b,#c,.d{height:20px;width:20px;border:1px solid #ccc;}

  • 同一属性的缩写,如:.font{border:1px solid #ccc;margin:0 4px;background:#fff url(imae/i.jpg);}等等。

2.选择器的使用:
  • 避免使用ID来写全局样式 如 #main a{color:#666;} (不可取)因为ID的优先级高于class这样定全局样式,使得里面的样式没办法重置。

  • 最后一级才可以使用标签来作为选择器;如:.header p a{color:#fff;}(不可取) 应该.header .news a{color:#fff;}

  • 尽量使用标签作为选择器 减少id class(但是遵循第2条):如:.menu ul{}等

  • 书写代码前, 考虑并提高样式重复使用率

  • 杜绝使用<meta http-equiv="X-UA-Compatible" content="IE=7" /> 兼容 ie8;

  • 在css中避免使用滤镜_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png影响css执行速度

  • 避免使用css表达式:top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); 影响css执行速度

  • 使用css sprite来优化页面,减少http请求数,加快网站加载。

3.css hack的编写在平时的开发中,我们经常遇到一些浏览器直接的差异问题,可能针对这类问题需要针对某类浏览器写兼容样式。
  • ie6 7 8 firefox的兼容写法

  • Ie都能认识 \0

  • Ie 8不认识 \9

  • Ie 67认识*

  • Ie6认识_

  • Css hack尽量避免使用,不符合w3c标准的。

4.Css的优先级问题:!important(尽量少使用)>Id >class > 标签选择器,书写css的时候特别注意优先级问题,css按照此规则来重置。
2 回复

为什么编辑不了???

enter image description here

点编辑为什么出来这个呢。

回到顶部