class样式命名

常见class关键词：

• 布局类：header, footer, container, main, content, aside, page, section
• 包裹类：wrap, inner
• 区块类：region, block, box
• 结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
• 列表类：list, item, field
• 主次类：primary, secondary, sub, minor
• 大小类：s, m, l, xl, large, small
• 状态类：active, current, checked, hover, fail, success, warn, error, on, off
• 导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
• 交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
• 星级类：rate, star
• 分割类：group, seperate, divider
• 等分类：full, half, third, quarter
• 表格类：table, tr, td, cell, row
• 图片类：img, thumbnail, original, album, gallery
• 语言类：cn, en
• 论坛类：forum, bbs, topic, post
• 方向类：up, down, left, right
• 其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading…
• 例如：text改为txt、delete改为del，这里针对单个单词组合命名，对词组单词的组合建议不使用缩写或简写。

class类名	类名缩写
bottom	btm
button	btn
background	bg
content	cont
check	chk
current	curr
delete	del
text	txt
disabled	dis
foot	ft
head	hd
hidden	hide
input	inp
image	img
index	idx
radio	rad
register	reg
select	sel
tbody	tbd
thead	thd
tfoot	tft
wrap	wp

各版本浏览器Hack

.all-IE{property: value\9;}
.IE-9{property: value\0/;}
.gte-IE-8{property: value\0/;}
.lte-IE-8{*property:value;}
.IE-7{+property:value;}
.IE-6{_property:value;}
/** Firefox浏览器 **/
@-moz-document url-prefix()  {
    .firefox{property:value;}
 }
/** Opera浏览器 **/
@media all and (-webkit-min-device-pixel-ratio: 0) {
    .webkit{property:value;}
}
@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) {
    .opera{property:value;}
}
/** Webkit内核浏览器(Safari、Chrome) **/
@media screen and (max-device-width: 480px) {
    .iphone-webkit{property:value;
}

前端工程师基本套路

转自：class命名
class命名