基本思路是确保全局空间下一级域名不冲突,那么子域名就被限定在了独立的局部作用域中,从而保证命名的唯一性。
BEM
Block-Element-Modifier
SUIT CSS
1、将命名对象划分为组件(component)和功能(Utility)。组件直接命名,功能额外加前缀,比如专门给js调用的类名可加上js前缀:js-button
2、规定了连字符的用法。普通隔断用单个连字符,描述性词汇用两个连字符:
.nav-button { }
.nav-button--primary { }
3、状态切换用is-state型的相邻类名(adjoining class)
.button { }
.button.is-disables { }
<button class=”button is-disables”></button>
OOCSS
抽象公共类,把复用度高的样式抽取出来。
过提高复用性,减少命名的需要,因为有的样式直接用公共类名就能实现,不需要额外命名。
.mt20 { margin-top: 20px }
.tc { text-align: center }
.abs { position: absolute }
.clearfix:after { content: ‘’; display: block; clear: both; height: 0 }
缺点是滥用就可能付出代价,比如有10个组件用同一个普通类名,那么修改样式只需要改一处CSS即可,但是在10个组件上用同一个公共类名比如mt20,意味着把mt20改成mt15,你需要改10处的class。
SMACSS
针对数量庞大的类名
- Base:基础的样式规则
- Layout:用于布局的样式规则
- Module:可复用的模块样式规则
- State:状态样式
- Theme:UI样式
针对不同分类,可以使用不同的前缀来划分命名空间
ITCSS
更像是 CSS 整体架构方案,与 SMACSS 横向分类不同,它综合了以上各种方法,提出了一个纵向分层模型。(bootstrap使用)
- Settings:简单的说就是在SCSS中预设好变量
- Tools:简单的说就是在SCSS中预设好mixins和functions
- Generic:简单的说就是reset.css或normalize.css
- Elements:对元素的基本格式化,如h1 { font-size: 20px }
- Objects:使用OOCSS抽象公共类
- Components:UI组件的样式
- Trumps:辅助性、功能性的特殊样式,例如动画