前端的一些编码规范

一:语义化:

1.语义化标签优先

2.基于功能命名,基于内容命名,基于表现命名

3简略,明了,无后患

二:命名范例

1所有命名使用英文小写

比如:class="Main"改为class="main"

2命令用引号包裹

比如:class=header改为class="header"

3用中横线链接

比如:class="headertitle"改为class="header-titile"

4:命名提现功能,不涉及表现样式(颜色,字体,边框,背景等)

比如:使用class="text-lesser"而不是class="light-gray"

三:常见命名

1:

.wrap或.wrapper--用于外侧包裹                                             

.container--包裹容器

.header--用于头部

.body--用于body

.footer--页面尾部

adide,sidebar--侧边栏

.content--用于主要内容

.navigation--导航元素

.pagination--分页

2:

.breadcrumbs--导航列表

.dropdown--下拉菜单

.article--文章

.main--用主体

.thumbnail--头像,小图像

.media--媒体资源

.panel--面板

.toopltip--鼠标放置上去的提示

.popup--鼠标点击弹出的提示

3:

.button--按钮

.ad--广告

.subnav--二级导航

.menu--菜单

.tag--标签

.message或者.notice--提示信息

.summary--摘要

.logo--logo

.search--搜索框

.login--登录

4:

.register--注册

.username--用户名

.password--密码

.banner--广告条

.copyright--版权

.modal或者.dialog--弹窗

四:css书写规范

1tab用两个空格表示

2css的{前加个空格

3每条声明后都加上分号

4换行,而不是放到一行

5颜色统一用小写,用缩写

6小数不写前缀,0不加单位

7尽量缩写

五:其他

bootstrap编码规范