CSS 模块化

一、文件结构

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

SMACSS 的全称叫 Scalable and Modular Architecture for CSS。即可扩展和模块化的CSS架构。SMACSS将样式分成5种类型：Base，Layout，Module，State，Theme。

1. Base: 基础样式表，定义了基本的样式，我们平时写CSS比如reset.css就是属于基础样式表，另外我认为清除浮动，一些动画也可以归类为基础样式。
2. Layout: 布局样式，用于实现网页的基本布局，搭起整个网页的基本骨架。
3. Module: 网页中不同的区域有这个不同的功能，这些功能是相对独立的，我们可以称其为模块。模块是独立的，可重用的组件，它们不依赖于布局组件，可以安全的删除修改而不影响其他模块。
4. State: 状态样式，通常和js一起配合使用，表示某个组件或功能不同的状态，比如菜单选中状态，按钮不可用状态等。
5. 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
合作伙伴：partner

BEM
BEM是Block，Element，Modifier的缩写。是比较流行的一种 CSS 命名方式。下面分别介绍这三个概念：

1. Block：在BEM的理论中，一个网页是由block组成的，比如头部是个block，内容是block，logo也是block，一个block可能由几个子block组成。
2. Element：element是block的一部分，具有某种功能，element依赖于block，比如在logo中，img是logo的一个element，在菜单中，菜单项是菜单的一个element
3. Modifier：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代码很长。

四、CSS预处理 - SASS

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;

计算

body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $var * 10%;
}

嵌套

div {
    h1 {
        color: red;
    }
}
编译后：
div h1 {
  color: red;
}

获取父元素

a {
    &:hover { color: #ffb3ff; }
}

使用 @at-root 规则

.zc_about {
    @at-root .zc_about_list {
        background-color:$mod-bg;
        text-align:center;
        overflow:hidden;
    }
}

继承

SASS 可以用 @extend 继承一个选择器：

.uc_btn_default,
.uc_btn_orange {
    background-color: $orange;
    color: #fff;
    &:visited {
        @extend .uc_btn_orange;
    }
}

进阶用法

Mixin

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;
}

颜色处理

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

流程控制

条件判断：
@if lightness($color) > 30% {
    background-color: #000;
} @else {
    background-color: #fff;
}

在 CSS Sprite 中使用循环语句：

@for $i from 1 through 4 {
    .ico#{$i} {
      background-position:-25px*($i - 1) 0;
    }
  }

function()

@function double($n) {
    @return $n * 2;
}
#sidebar {
    width: double(5px);
}