CSS架构（命名组织方式）札记

css组织命名方式(CSS架构)主要有OOCSS,BEM,SMACSS,MVCSS等。关于css framework，请参考演讲稿。前两者侧重于命名方式，后两者侧重于组织方式。

OOCSS

OOCSS按照语义是面向对象的样式组织方式，是将类名划分到最基础的原子层次，再根据不同标签的需要分别重新设置组合各种类名，例如：f12,len200。详情参考w3cplus的概念篇。按照OOCSS来组织样式，最明显的特点就是会在一个标签上铺设很多的类名。
举例如下：

  

    区块一的内容
  
  

    区块二的内容
  
  

    区块三的内容
  

/* 样式 */
.cf {
  zoom: 1;
}
.cf:before, .cf:after {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.long{
  width: 1000px;
}
.middle{
  width: 600px;
}
.short{
  width: 200px;
}

BEM

BEM按照模块的思想组织类名，一个单独的模块以一个特殊的名称命名，如panel(面板)。
内部元素命名以模块名称为基础，例如：内部第一个元素：panel-hd，主体部分：panel-bd，末尾元素：panel-ft。再内层的元素命名可以继续嵌套，如：panel-hd-icon。不过为了防止命名不至于太长，可以直接命名成：panel-icon，根据实际情况适当简省类名。
BEM中还有一个重要的概念是样式修饰符，可以表示一个元素的不同状态。例如某个span元素，可以根据不同的用户交互状态分别设置类名：ele__focus,ele_focusout等状态修饰类。
使用不同预编译语法编写时要注意适当剥离嵌套，不同编译器语法都有相应的跳出冗余嵌套的方式。

  
  

    标题
    
  
  
  

    

      内容
    
    

    
  

  
  

    标题
    more
  
  
  

    
    

      content
    
    
    

    
  

SMACSS,MVCSS

SMACSS是将样式按照功能分成base,layout,module,state等类型。MVCSS在SMACSS基础上，进一步将不同功能的样式文件划分到foundation,component,structure几个核心文件夹中去。css预编译语言引入开发后，这种组织形式可以使样式代码更易于管理。
MVCSS举例如下：

+--./foundation(基础)
+-----helpers/
---------_animation.scss
---------_function.scss
---------_mixin.scss
---------_placeholder.scss
---------_tool.scss
------_base.scss
------_config.scss(配置)
------_helpers.scss(对应helpers文件夹)
------_reset.scss(重置)
+--./component(组件)
------_tab.scss
+-----tab/(不同页面的组件样式微调)
---------_common.scss
---------_for-page-xxx.scss
+-----custom_plugin/(插件样式)
---------_pluginnamexxx.scss
+--------pluginnamexxx/(分页面微调)
------------_common.scss
------------_for-page-xxx.scss
+--./structure(结构)
------_index.scss
+-----_index/(_index.scss样式组成部分)
---------_common.scss
---------_animation.scss
+-----page/(其他页面)
---------_setting.scss

本文原创，转载请注明出处。不足之处，恳请指正。