// dom结构

  
    标题

// 模块的标记 唯一标识
.toggle{
}
// 皮肤样式的写法，如果基本结构是一样的，你可以用complex的一个辅助样式
.toggle.simple{
}
// 是否做嵌套写法 相信很多预处理器的部分会支持嵌套 然后很多人会这样写,不被推荐的
.toogle{
 .toogle-control{
 }
 .toogle-details{
 }
}
// 其实你会这样组织么 不是很建议 这样会降低查询效率 如果能确认唯一性的时候 其实直接写子即可
.toogle{}
.toogle-control{}
.toogle-details{}

smacss

sma和oocss有很多类似之处，但区分的地方有很多，主要是对样式的分类。分别是：基础、布局、模块、状态、主题

基础

可以适用于任何位置，我也称全局样式

布局

主要是用来实现不同的特色布局，提高布局的复用率，

模块

设计中的模块化，可重复使用的一个单元，一般是dom+css的耦合绑定。

状态

描述在特定状态下的布局或者模块的特殊化表现，这里我觉得要推荐下《css禅意花园》，在dom结构不变的情况下，可以通过css的皮肤化实现样式的改版。

主题

与状态相比更加定制的是，我们会针对有些特殊的模块，进行主题的设置，包括一系列的颜色、尺寸、交互等进行重度设计，参数化设计。

案例

// dom结构

  
    标题