css之如何命名class
前言：
很多人在写css时，class命名时，会想到我得起个独特的名字，然后放心地写自己的css，这个应该只有我自己在用，上线后，自我欣赏，完美 O(∩_∩)O哈哈~。一和别人集成，问题来了，茫茫人海，居然有人跟你三观一致，样式冲突啦，被覆盖啦，呀，改的时候无限感慨，谁写的，谁咋这样写呢？怎么改呀，我是换个class名字？还是再加个父元素？ 啊，太坑了~~ 急了 !important~~
由此可见，class命名就跟牙疼，虽不是病，疼起来也要命~~，更主要我们还要兼顾其可读性以及复用性，同时避免冲突的可能。摸索吧~
命名历程：
class命名历程：
- 无章程，无规律可循，想怎么写就怎么写，哪里需要写哪里，只管自我欣赏。
- 拼凑组合写法，过复杂的样式需要多个class组合，有时修改个样式，需要修改html文件，相当不灵活。
- 模块阶段，前缀表示模块，随着模块的增加，你的前缀再增加或者再加上二级前缀，最后缀的自己都记不清了，别人更看不懂了~
- BEM （Block+Element+Modifier）99.99%的几率不会冲突，便于统一团队开发规范和方便维护。主要缺点就是DOM嵌套的越深，你的class名字会比较长，写css时，就拷贝class名字，你可能会觉得就一个p,搞这么长名字class~
- 世上没有完美，却有适用的。吸取之长，弃之短缺。 比如这样：我们约定用‘_’连接子元素，‘__’ 长下划线意义‘ --’连接特殊性 .button_span__msg--success
常见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...
基于这些关键词，结合我们自定义的规则，形成体系.
举个例子，可以这样：.block_head__icon--contact
总结：
记住基础关键词，加上合理的修饰关键词，再搞个特殊化，加上层级，样式的范围就大致定下来了。
沿着前人摸索的道路，我们很快找到适合自己的命名规范，整个团队约定俗成，从而冲突得以避免，去吧，高枕无忧地写你的css. ^_^
