CSS最基本结构:
- base.css - common.css - pages.css复杂一点的结构:
- base.css - header.css - footer.css - sidebar.css - forms.css - icons.css - buttons.css - dropdown.css - modals.css - layout.css - index.css - user.css - admin.css - pages.css如果后期不打算合并CSS的，建议尽可能减少 CSS 文件的数量。
如果要做合并压缩 CSS 文件，则可以对CSS 文件进行适当的组织，这是 CSS 模块化最简单有效的方法。建议根据项目情况使用上述的两种或是其他文件组织方案。
SMACSS 的全称叫 Scalable and Modular Architecture for CSS。即可扩展和模块化的CSS架构。SMACSS将样式分成5种类型：Base，Layout，Module，State，Theme。
Base: 基础样式表，定义了基本的样式，我们平时写CSS比如reset.css就是属于基础样式表，另外我认为清除浮动，一些动画也可以归类为基础样式。Layout: 布局样式，用于实现网页的基本布局，搭起整个网页的基本骨架。Module: 网页中不同的区域有这个不同的功能，这些功能是相对独立的，我们可以称其为模块。模块是独立的，可重用的组件，它们不依赖于布局组件，可以安全的删除修改而不影响其他模块。State: 状态样式，通常和js一起配合使用，表示某个组件或功能不同的状态，比如菜单选中状态，按钮不可用状态等。Theme: 主题皮肤，对于可更换皮肤的站点来说，这个是很有必要的，分离了结构和皮肤，根据不同的皮肤应用不同的样式文件。一些常用的模块命名，可适当地使用单词缩写：
头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 注册：regsiter 状态：status 投票：vote 合作伙伴：partnerBEM BEM是Block，Element，Modifier的缩写。是比较流行的一种 CSS 命名方式。下面分别介绍这三个概念：
Block：在BEM的理论中，一个网页是由block组成的，比如头部是个block，内容是block，logo也是block，一个block可能由几个子block组成。Element：element是block的一部分，具有某种功能，element依赖于block，比如在logo中，img是logo的一个element，在菜单中，菜单项是菜单的一个elementModifier：modifier是用来修饰block或者element的，它表示block或者element在外观或行为上的改变 .block {} .block__element {} .block--modifier {} .product-details {} .product-details__price {} .product-details__price--sale {}SUIT Suit起源于BEM，但是它对组件名使用驼峰式和连字号把组件从他们的修饰和子孙后代中区分出来：
.u-utility {} .ComponentName {} .ComponentName-modifierName {} .ComponentName-descendantName {} .ComponentName.is-someState {}原子类 在阿当的《编写高质量代码 Web前段开发修炼之道》这本书中，提倡并提供了一套原子类，相信很多前端开发者都有所了解。它提供了一套包含高度复用样式的 class ，下面截取一段书中的 base.css 的代码：
/*文字排版*/ .f12{font-size:12px;} .f20{font-size:20px;} .fb{font-weight:bold} .fn{font-weight:normal;} .t2{text-indent:2em;} .lh150{line-height:150%;} .unl{text-decoration:underlline;} .no_unl{text-decoration:none;} /*定位*/ .tl{text-align:left;} .tc{text-align:center;} .tr{text-align:right;} .bc{margin-left:0;margin-right:0;} .fl{float:left;display:inline;} .fr{float:right;display:inline;} .cb{clear:both;} .cl{clear:left;} .cr{clear:rigth;} .vm{verticle-align:middle;} .abs-right{position:absolute;right:0} .zoom{zoom:1;} .hidden{visiility:hidden;} .none{display:none;} /*长度高度*/ .w10{width:10px;} .w{width:100%} .h50{width:50px;} .h{height:100%} /*边距*/ .m10{margin:10px;} .m15{margin:15px;} .m30{margin:30px;} .mt5{margin-top:5px;} .mt10{margin-top:10px;} .mt15{margin-top:15px;}基于这些原子类，我们可以在项目中非常自由、灵活地组合使用，好处就是几乎不怎么需要你再写 CSS 代码了。但是，这种做法的缺点也是很明显的：
维护困难：代码冗余：经常会出现这样一种情况，在一个元素上添加好多个 class ，导致HTML代码很长。SASS 是一种 CSS 预处理器，用它的语法书写样式，再编译成 CSS 文件。它自身兼容 CSS 语法，也就是说，把你的 CSS 文件复制到 SCSS 文件中也可以正常使用。
SASS 使用了很多模块化和面向对象的思想，使得我们的样式更加易维护。下面讲一下 SASS 的常用特性。
声明变量，所有变量以 $ 开头：
// Color $gray-darker: #333; $gray-dark: #666; $gray: #999; $gray-light: #ccc; // 文字主色 $main-color: #808080; // 其他颜色 $body-bg: #f6f6f6; $mod-bg: #fcfcfc; // 有内容模块背景色 // 常用色 $orange: #f90; $red: #cb0000;SASS 可以用 @extend 继承一个选择器：
.uc_btn_default, .uc_btn_orange { background-color: $orange; color: #fff; &:visited { @extend .uc_btn_orange; } }Mixin 用于定义一些公用的部分，定义一个 Mixin:
// 两边间隙布局 @mixin layout { padding-left:10px; padding-right:10px; }通过 @include 使用：
div { @include layout; height:1rem; }Mixin 还可以指定参数：
// icon基本样式 @mixin icon-base($size) { display: inline-block; width: $size; height: $size; vertical-align: middle; background-repeat: no-repeat; background-size: contain; }在 CSS Sprite 中使用循环语句：
@for $i from 1 through 4 { .ico#{$i} { background-position:-25px*($i - 1) 0; } }