css组织命名方式(CSS架构)主要有OOCSS,BEM,SMACSS,MVCSS等。关于css framework，请参考演讲稿。前两者侧重于命名方式，后两者侧重于组织方式。
OOCSS
OOCSS按照语义是面向对象的样式组织方式，是将类名划分到最基础的原子层次，再根据不同标签的需要分别重新设置组合各种类名，例如：f12,len200。详情参考w3cplus的概念篇。按照OOCSS来组织样式，最明显的特点就是会在一个标签上铺设很多的类名。
举例如下：
<!-- 结构 -->
<div class="cf f12 L1000">
<div class="fl long">
区块一的内容
</div>
<div class="fl middle">
区块二的内容
</div>
<div class="fl short">
区块三的内容
</div>
</div>
/* 样式 */
.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等状态修饰类。
使用不同预编译语法编写时要注意适当剥离嵌套，不同编译器语法都有相应的跳出冗余嵌套的方式。
<!-- 基础版 -->
<div class="panel">
<!-- panel head -->
<div class="panel-hd">
<span class="panel-hd-title">标题</span>
<i class="panel-hd-icon"></i>
</div>
<!-- panel body -->
<div class="panel-bd">
<div class="panel-bd-content">
内容
</div>
<div class="panel-bd-news">
</div>
</div>
</div>
<!-- 推荐版 -->
<div class="panel">
<!-- panel head -->
<div class="panel-hd">
<span class="panel-title">标题</span>
<i class="panel-icon">more</i>
</div>
<!-- panel body -->
<div class="panel-bd">
<!-- 简化 -->
<div class="panel-content">
content
</div>
<!-- 简化 -->
<div class="panel-news">
</div>
</div>
</div>
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
本文原创，转载请注明出处。不足之处，恳请指正。
网友评论