命名技巧
语义化
语义化标签优先
基于功能命名、基于内容命名、基于表现命名
简略、明了、无后患
tips:
大声叫出它的名字
翻译成英文
范例
<!-- 不好 --><div class="article"> <div class="article_title">编码规范</div> <div class="the_content">今天讲的内容是编码规范 <div class="darkbold">evenyao</div> @evenyao </div></div>
<!-- 好 --><article> <h1>编码规范</h1> <p>今天讲的内容是编码规范 <b>evenyao</b> @evenyao</p></article>
范例
<!-- 不好 --><div class="left"></div><div class="red"></div><div class="s"></div><a class="link" href="#"></a>
<!-- 好 --><div class="success"></div><div class="theme-color"></div><a class="login" href="#"></a>
范例
<!-- 好 --><article class="movies">...</article><article class="news">...</article>
<!-- 不好 --><article class="blue">...</article><article class="redBg mt30 bigText">...</article>
命名范例
1.所有命名都使用英文小写 推荐：`<div class="main"></div> ` 不推荐： `<div class="Main"></div> ` 2.命名用引号包裹 推荐：`<div id="header"></div> ` 不推荐： `<div id=header></div> ` 3.用中横线连接 推荐：`<div class="mod-modal"></div> ` 不推荐： `<div class="modModal"></div> ` 4.命名体现功能，不涉及表现样式(颜色、字体、边框、背景等) 推荐：`<div class="text-lesser"></div>` 不推荐： `<div class="light-grey"></div>`
常见命名1
.wrap或.wrapper-- 用于外侧包裹.container或.ct-- 包裹容器.header-- 用于头部.body-- 页面 body.footer-- 页面尾部aside、sidebar-- 用于侧边栏.content-- 和header footer 对应，用于主要内容.navigation-- 导航元素.pagination-- 分页
常见命名2
.tabs > .tab-- tab 切换.breadcrumbs-- 导航列表、面包屑.dropdown-- 下拉菜单.article-- 文章.main-- 用于主体.thumbnail-- 头像，小图像.media-- 媒体资源.panel-- 面板.tooltip-- 鼠标放置上去的提示.popup-- 鼠标点击弹出的提示
常见命名3
.button、.btn-- 按钮.ad-- 广告.subnav-- 二级导航.menu-- 菜单.tag-- 标签.message或者.notice-- 提示消息.summary-- 摘要.logo-- logo.search-- 搜索框.login-- 登录
常见命名4
.register-- 注册.username-- 用户名.password-- 密码.banner-- 广告条.copyright-- 版权.modal或者.dialog-- 弹窗
常见命名5
var 名字 = {
状态: [ 'inverse', 'toggled', 'switched', 'original', 'initial', 'identified', 'disabled', 'loading', 'pending', 'syncing', 'default'
],
修饰: [ 'dark', 'light', 'shaded', 'flat', 'ghost', 'maroon', 'pale', 'intense', 'twisted', 'narrow', 'wide', 'smooth', 'separate', 'clean', 'sharp', 'aligned'
],
元素: [ 'pagination', 'modal', 'popup', 'article', 'story', 'flash', 'status', 'state', 'media', 'block', 'card', 'teaser', 'badge', 'label', 'sheet', 'poster', 'notice', 'record', 'entry', 'item', 'figure', 'square', 'module', 'bar', 'button', 'action', 'knob'
],
布局: [ 'navigation', 'wrapper', 'inner', 'header', 'footer', 'aside', 'section', 'divider', 'content', 'container', 'panel', 'pane', 'construct', 'composition', 'spacing', 'frame'
]
}CSS规范
书写规范
tab 用两个空格表示
css的
:后加个空格，{前加个空格每条声明后都加上分号
换行，而不是放到一行
颜色用小写，用缩写,
#fff小数不用写前缀,
0.5s->.5s；0不用加单位尽量缩写，
margin: 5px 10px 5px 10px->margin: 5px 10px
范例
/* Not recommended */.test { display: block; height: 100px}/* Recommended */.test { display: block; height: 100px;
}/* Not recommended */h3 { font-weight:bold;
}/* Recommended */h3 { font-weight: bold;
}/* Not recommended: missing space */#video{ margin-top: 1em;
}/* Not recommended: unnecessary line break */#video{ margin-top: 1em;
}/* Recommended */#video { margin-top: 1em;
}/* Not recommended */a:focus, a:active { position: relative; top: 1px;
}/* Recommended */h1,h2,h3 { font-weight: normal; line-height: 1.2;
}/* Always put a blank line (two line breaks) between rules. */html { background: #fff;
}body { margin: auto; width: 50%;
}/* Not recommended */@import url("//www.google.com/css/maia.css");html { font-family: "open sans", arial, sans-serif;
}/* Recommended */@import url(//www.google.com/css/maia.css);html { font-family: 'open sans', arial, sans-serif;
}参考
作者：evenyao
链接：https://www.jianshu.com/p/3b2b12fdcc59