点击上方蓝字关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!
这些命名,做前端的,其实心中都有一张列表,过一遍让自己脑海里更规范,
一、常用命名
标题:title
摘要:summary
箭头:arrow
商标:label
网站标志:logo
转角/圆角:corner
横幅广告:banner
子菜单:subMenu
搜索框:searchBox
登录:login
登录条:loginbar
工具条:toolbar
下拉:drop
标签页:tab
当前的:current
列表:list
滚动:scroll
服务:service
提示信息:msg
热点:hot
新闻:news
小技巧:tips
下载:download
栏目标题:title
热点:hot
加入:joinus
注册:regsiter
指南:guide
友情链接:friendlink
状态:status
版权:copyright
按钮:btn
合作伙伴:partner
投票:vote
左/右/中:left/right/center
简介:profiles
评论:comment
二、页面结构
容器:container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
三、导航
导航:nav
主导航:mainnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题:title
摘要:summary
四、功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:register
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的:current
小技巧:tips
图标:icon
注释:note
指南:guild
服务: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{}