记录生活 学习SEO优化 | 他日若遂凌云志 敢笑黄巢不丈夫
>>Home > 学习笔记 > CSS层叠样式表命名参考

CSS层叠样式表命名参考

Tags: | | 作者:海天无影

一些比较好的css样式命名,记录下来,以后做网站的时候就直接用这个,省的到时候再找。规范一下,这样几个人的工作才不会重复、无效。


页面结构类

描述 下划线命名 骆驼式命名 参考命名
面板 dashboard
容器 container container
页头 header header
内容 content content container
外围控制 wrapper wrapper wrap
页面主体 main main
栏目 column column
- 宽栏目 wide_column wideColumn
- 窄栏目 narrow_column narrowColumn
bar
侧边栏 sidebar sidebar
网站地图 sitemap
页尾 footer footer

导航类

描述 下划线命名 骆驼式命名 参考命名
主导航 nav_main navMain
- 子导航 nav_child navChild
- 三级导航 nav_third navThird
导航 nav nav
- 顶导航 nav_top navTop
- 左导航 nav_left navLeft
- 右导航 nav_right navRight
菜单 menu menu
- 子菜单 menu_child menuChild
- 下拉菜单 menu_drop menuDrop
位置导航 crumb crumb
面包屑 breadcrumb breadcrumb
父集 parent
子集 child
location-based
attribute-based
path-based

表单

描述 下划线命名 骆驼式命名 参考命名
邮件 mail
用户名 username
密码 passwd
重复密码 passwd_again
保存信息 cookie
性别 sex
地点 local
下拉 drop
验证码 verification
按钮 btn
必填项 requisite
状态 status

功能模块

描述 下划线命名 骆驼式命名 参考命名
登录 login
注册 regsiter
搜索 search
标签页 tab
工具条 toolbar
标签页 tab
日历 calendar
分类 category categories
归档 archive archives
回复 comment comments
标签 tag tags
投票 vote
合作伙伴 partner
友情链接 friendlink
新闻 news
下载 download
指南 guild
帮助 help
常见问题 faq
服务 service

内容

描述 下划线命名 骆驼式命名 参考命名
注释 note
条目 entry
摘要 summary
缩略图 screenshot
提示信息 msg
小技巧 tips
正方形的 Square
极小的 Thumbnail
小的 Small
中等的 Medium
大的 Large
原始的 Original

动作

描述 下划线命名 骆驼式命名 参考命名
滚动 scroll
箭头 arrow
首页 first
上一页 prev previous
下一页 next
末页 last
更早的 older
更新的 newer

状态

描述 下划线命名 骆驼式命名 参考命名
列表 list
-热点 hot
-更新 new
前十列表 topten_list
相关列表 related_list
更新列表 update_list

日志信息 »

该日志于2012-04-20 15:32由 海天无影 发表在学习笔记分类下, 你可以发表评论。除了可以将这个日志以保留源地址及作者的情况下转载到你的网站或博客,还可以通过RSS 2.0订阅这个日志的所有评论。

11条评论▼点击进行评论

  1. 你也在搞前段了么
    呵呵

  2. 嗯,有规矩方便很多任~~

    • 恩 说的是啊 这样规划出来 以后用方便一点~

  3. 最近要转行了,似乎这个css是我必须要学的。

  4. 确实要有些自己的规则出来。

  5. 有规可依,是做美工必备的,不能每一次都随着自己性子来

  6. 不错,总结的好棒,来学习一下

  7. 这个可以有,很多人写的那个啥叫啥啊,看得我傻眼

  8. 真在学习CSS呢,很有效果!

  9. 学习了,谢谢博主

  10. 路过,支持支持~

  11. 每天坚持更新博客还是很难得的,对于一些好的博文,
    我一般都是收藏的,在这里就先谢谢这些博主的无私分享了。

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 

« 浅谈互联网页面价值 新浪网首页内链的小细节 »