不知道大家有没有这样一个苦恼,在开发过程中经常为了起一个css名,文件名,组件名而苦恼
起的高大上点害怕连自己都看不懂,起的太简单又显得自己很不专业
下面我们就来解决这个问题
布局使用语义化标签
对于经验资深的前端er,在给web布局时,相信都会很注重标签和命名的规范。尤其是随着html5的普及发展,更是把web前端语义化推向一个新的台阶上。比如html5给我们新增的语义标签:header、nav、main、aside、footer、section、article等等。
二、命名规范
在开发的时候,经常会因为元素命名而头疼,无论是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
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:join
指南:guide
服务:service
注册:register
状态:status
投票:vote
合作伙伴:partner
...
命名原则就是:命名要有语义化,首先你自己得看懂,其次别人一看也懂
页面结构类
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
导航类
导航:nav
主导航:mainnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
功能类
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright
class/css的命名
- 颜色:使用颜色的名称或者16进制代码,如:
.red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; }
- 字体大小,直接使用“font+字体大小”作为名称,如:
.font12px { font-size: 12px; }.font9pt {font-size: 9pt; }
- 对齐样式,使用对齐目标的英文名称,如:
.left { float:left; } .bottom { float:bottom; }
- 标题栏样式,使用“类别+功能”的方式命名,如:
.navnews { } //导航栏: 新闻.navproduct { } //导航栏: 产品
其他
- 一律小写;
- 尽量用英文;
- 尽量不加中杠和下划线;
- 尽量不缩写,除非一看就明白的单词,如:wrapper可以写成wrap。
- css文件命名规范:
主要的 master.css;模块 module.css;基本共用 base.css;布局/版面 layout.css;主题 themes.css;专栏 columns.css;文字 font.css;表单 forms.css;补丁 mend.css;打印 print.css
参考链接:https://www.jianshu.com/p/6417143c4b18