海天无影Blog

CSS层叠样式表命名参考

/ 1642阅 / 14评 / 0

一些比较好的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

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注