• 欢迎访问ByWei.Cn,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,加入百味博客 软件定制QQ群
  • 已升级为最新版主题,并将持续优化改造中,支持说说碎语功能,可像添加文章一样直接添加说说,博客主题升级啦
  • 感谢您百度求点赞啊!百度网址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏百味博客吧
  • 博主热烈欢迎 软件定制开发 联系:http://www.bywei.cn

css书写规范web标准化

Web前端 百味博客 11年前 (2013-04-08) 1597次浏览 0个评论 扫描二维码
  1. 无特殊说明,编码统一为utf-8;为了防止文件合并及编码转换时造成问题,建议将样式中文字体名字改成对应的英文名字(unicode码), 如:宋体( \5b8b\4f53)微软雅黑(”Microsoft YaHei”,”\5FAE\8F6F\96C5\9ED1″),几个单词中间有空格组成的必须加引号) ;
  2. 为CSS类名定义的时候,尽量使用小写字母,如果有两个以上的单词,在每个单词之间使用”-”或”_”符或单词首字母大写(第一个单词除外)。 如:”main-content”或”mainContent”。关于class与id命名等详细请参考命名规范,样式实现除特殊情况,全优先使用 class;
  3. CSS引用按照制定的框架结构来使用,详情见css框架结构;
  4. 命名避免结构化方式,尽量使用语义化/功能化方式,如下示例:
    结构化命名与语义化命名
    

    而现在我们想把页面中的元素调换一下位置,

    结构化命名与语义化命名
    

    换句话说,使用语义化方式的话,你在修改网站布局的时候可以仅仅修改相关CSS类的属性即可,而不用修改它们的类名了,如果网站的代码很庞大,这将节省大量的时间。

  5. class与id的使用: id是唯一的并是父级的,class是可以重复的并是子级的,所以id仅使用在大的模块上,class可用在重复使用率高及子级中;id原则上都是在分发框架文件时统一命名,为JavaScript预留钩子的除外;
  6. 为JavaScript预留钩子的命名,请以 JS_ 起始,比如:JS_hide, JS_show;
  7. 充分利用html自身属性及样式继承原理减少代码量,或制定特定标签的指定使用方式,比如:全局统一价格标签<dfn>¥<i>320</i>起</dfn>
  8. 书写代码前,考虑并提高样式重复使用率;
  9. 禁止使用expression表达式;
  10. 禁止滥用!important(使用前必须讨论确认不会造成其他BUG或者维护问题);
  11. 尽量少的使用滤镜,尽量减少hack数,能不hack的坚决不hack;
  12. 字体粗细采用具体数值,粗体bold写为700,正常normal写为400;
  13. 能缩写的尽量缩写,如 padding:5px 0 0 5px;
  14. 去掉0后面的单位(禁止出现如0px等多余的单位)、颜色值使用颜色的名称或者16进制代码16进制来表示,CSS3的rgb除外;
  15. 层级(z-index)必须清晰明确,页面弹窗、气泡为最高级(最高级为999,如showWin、pop等),不同弹窗气泡之间可在三位数之间调整;普通区块为10-90内10的倍数;区块展开、弹出为当前父层级上个位增加,禁止层级间盲目攀比。
  16. 为方便组件模块化和提高弹性,正常情况下,为避免外边界冲突,组件不应设置外边界,外边界用组合css方式实现,如:pd10{padding:10px}mt10{margin-top:10px}等;
  17. 必须为大区块&重要模块的样式添加注释,小区块适量注释;
  18. 代码缩进与格式:统一单行书写,可根据自身习惯,后期优化会统一处理;
  19. 正式发布前应进行压缩,压缩后文件的命名应添加”_min”后缀;

 


百味博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:css书写规范web标准化
喜欢 (29)
[微信扫一扫]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址