TAT.sheran 关于团队合作的 css 命名规范
In 未分类 on 2011年10月28日 by view: 38,527
18

关于团队合作的 css 命名规范

常用的 css 命名规则:

  • 头:header
  • 内容:content/container
  • 尾:footer
  • 导航:nav
  • 侧栏:sidebar
  • 栏目:column
  • 页面外围控制整体布局宽度:wrapper
  • 左右中:left right center
  • 登录条:loginbar
  • 标志:logo
  • 广告:banner
  • 页面主体:main
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 子导航:subnav
  • 菜单:menu
  • 子菜单:submenu
  • 搜索:search
  • 友情链接:friendlink
  • 页脚:footer
  • 版权:copyright
  • 滚动:scroll
  • 内容:content
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg
  • 小技巧:tips
  • 栏目标题:title
  • 加入:joinus
  • 指南:guide
  • 服务:service
  • 注册:register
  • 状态:status
  • 投票:vote
  • 合作伙伴:partner

 

注释的写法:

/* Footer */

内容区

/* End Footer */

id 的命名:

(1) 页面结构

  • 容器: container
  • 页头:header
  • 内容:content/container
  • 页面主体:main
  • 页尾:footer
  • 导航:nav
  • 侧栏:sidebar
  • 栏目:column
  • 页面外围控制整体布局宽度:wrapper
  • 左右中:left right center

(2) 导航

  • 导航:nav
  • 主导航:mainnav
  • 子导航:subnav
  • 顶导航:topnav
  • 边导航:sidebar
  • 左导航:leftsidebar
  • 右导航:rightsidebar
  • 菜单:menu
  • 子菜单:submenu
  • 标题: title
  • 摘要: summary

(3) 功能

  • 标志:logo
  • 广告:banner
  • 登陆:login
  • 登录条:loginbar
  • 注册:regsiter
  • 搜索:search
  • 功能区:shop
  • 标题:title
  • 加入:joinus
  • 状态:status
  • 按钮:btn
  • 滚动:scroll
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg
  • 当前的: current
  • 小技巧:tips
  • 图标: icon
  • 注释:note
  • 指南:guide
  • 服务:service
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 投票:vote
  • 合作伙伴:partner
  • 友情链接:link
  • 版权:copyright

class 的命名:

(1) 颜色: 使用颜色的名称或者 16 进制代码, 如

  • .red { color: red; }
  • .f60 { color: #f60; }
  • .ff8600 { color: #ff8600; }

(2)字体大小, 直接使用”font+字体大小” 作为名称, 如

  • .font12px { font-size: 12px; }
  • .font9pt {font-size: 9pt; }

(3) 对齐样式, 使用对齐目标的英文名称, 如

  • .left { float:left; }
  • .bottom { float:bottom; }

(4) 标题栏样式, 使用” 类别+功能” 的方式命名, 如

  • .barnews { }
  • .barproduct { }

注意事项::

  1. 一律小写;
  2. 尽量用英文;
  3. 不加中杠和下划线;
  4. 尽量不缩写,除非一看就明白的单词.
  • 主要的 master.css
  • 模块 module.css
  • 基本共用 base.css
  • 布局,版面 layout.css
  • 主题 themes.css
  • 专栏 columns.css
  • 文字 font.css
  • 表单 forms.css
  • 补丁 mend.css
  • 打印 print.css

http://www.qianduan.net/css-selectors-naming-2.html

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2011/10/css-on-team-naming/

  1. Gail 2016 年 4 月 8 日

    注意事项是建议还是什么,驼峰式命名有大写呀,我用中杠偏多

  2. Tex 2015 年 10 月 10 日

    挺好,挺好,非常实在

  3. oldfu 2015 年 6 月 16 日

    这个很重要!

  4. 常用的css命名规则 | yuwei's site 2014 年 10 月 4 日

    […] 转自:Alloy Team Blog […]

  5. css中id和class命名问题 | segment-解决方案 2014 年 9 月 3 日

    […] http://www.alloyteam.com/2011/10/107/ —————————————————————————————————————————————————— ↓ 解决方案 ↓ 说下我的习惯. […]

  6. 2014/8/5 在计蒜客学习笔记 - 土豪哥's Blog | 土豪哥的博客 2014 年 8 月 7 日

    […] 2014/8/5 在计蒜客学习笔记 “id”——标识标签的唯一身份 “class”——标记标签的类别特质 id 有唯一性,有多个相同 id 的 HTML 标签,浏览器只选择第一个 id 进行操作 class 是标签的 “类”,就像穿的衣服 腾讯 AlloyTeam 的命名规则就是不错的一个规则,在平日可以参考使用(http://www.alloyteam.com/2011/10/107/)。 […]

  7. Andrew 2014 年 6 月 16 日

    good!

  8. excel学习网 2014 年 6 月 7 日

    仅做参考把,一个人一个习惯,但是统一起来无益对团队是个很好的提升,规范度更高。

  9. http://www.pinterest.com/jimmychoooutlet/ 2013 年 12 月 27 日

    Efficiently hello there eveyone, presently been employing this internet site and experienced wonderful replies but only just discovered this merchandise!!!!!

  10. 一路向北 2013 年 12 月 5 日

    不错

  11. NoNo Lee 2013 年 8 月 6 日

    主导航:mainbav 更正为 mainnav

    个人觉得 mainNav 更好更直观。

  12. 81% 2012 年 6 月 15 日

    借鉴下

  13. Tarycoazy 2012 年 3 月 28 日

    🙂

  14. Esther 2012 年 3 月 19 日

    太有才了!

发表评论