ITCSS 简介
CSS 设计有很多方法论，比如比较常见的OOCSS，BEM，SMACSS等等
目前的项目中使用了 ITCSS + BEM，感觉不错，这里做一下介绍
ITCSS，这是由csswizardry提倡的一个 CSS 设计方法论，他可以让你更好的管理、维护你的项目的 CSS
ITCSS 的相关资料
对于如何管理好项目的 CSS，ITCSS 认为需要做到以下几点
- A sane environment that is accessible to lots of people.
- To tame and manage source order and the cascade.
- To create a place for everything to live (new and old).
- To reduce waste and redundancy.
- To end the Specificity Wars.
https://speakerdeck.com/dafed/managing-css-projects-with-itcss
具体采用以下的解决办法
- Manages source order.
- Filters explicitness.
- Tames the cascade.
- Sanitises inheritance.
https://speakerdeck.com/dafed/managing-css-projects-with-itcss
大概意思是使用 ITCSS 可以帮助你
- 管理 CSS 代码的书写顺序
- 过滤明确性？估计是说分层来明确每层 CSS 的作用
- 驯服 CSS cascade(权重)
- 安全的使用继承
layers
ITCSS 把 CSS 分成了以下的几层
| Layer | 作用 |
|---|---|
| Settings | 项目使用的全局变量 |
| Tools | mixin，function |
| Generic | 最基本的设定 normalize.css，reset |
| Base | type selector |
| Objects | 不经过装饰 (Cosmetic-free) 的设计模式 |
| Components | UI 组件 |
| Trumps | helper 唯一可以使用 important! 的地方 |
可以看出这是一个倒三角形
- 越往下就越具体，越局限于使用在某个具体的画面
layer 的增减
这些 layer 你不需要都使用，根据你项目的情况可以对 layer 进行增减
- 比如你想像 OOCSS 一样的话，可以删除掉 Objects layer
- 想向 SMACSS 那样添加一个 Themes 的话，可以在 Components layer 下面追加一个 Themes layer
github 有非常多的 ITCSS 的项目，有兴趣的朋友可以研究下
下面介绍下每个 layer 的具体内容
sample code 用的是 sass，命名用的是BEM
Settings
全局变量，比如颜色，字体大小等等
$yellow: #FAAF00;
$yellow-bright: #FAF7F0;
Tools
mixin，function 等等
@mixin sample-mixin () {
...
}
到 Tools 为止，不会生成具体的 css
Generic
reset，normalize 等等
*,
*::before,
*::after {
box-sizing: border-box;
}
Base
type selector 比如 link, p 等等，只有这一层才使用 type selector
p {
margin: 0
line-height: 1.5;
}
Objects
Cosmetic-free，不使用比如 color、border-color、background-color 之类的
使用这个 CSS 你在浏览器上面只可以看一片空白
主要用来做画面的 layout
.o-container {
box-sizing: border-box;
margin: 0 auto;
}
Components
UI 组件
到这个部分，可以和搞设计的商量下具体有哪些组件需要实现，可以分给多个人来同时实现
# button组件
.c-btn {
display: flex;
justify-content: center;
align-items: center;
...
&--primary {
background-color: #ff5959;
color: #fff;
}
&--large {
font-size: 16px;
padding: 16px 14px;
...
}
}
HTML 类似这样
<a class="c-btn c-btn--primary" href="#">sample</a>
<a class="c-btn c-btn--primary c-btn--large" href="#">sample</a>
细化组件
在实际开发中，由于是用的 responsive web design
所以加了一层来放每个页面专用的部分
因为每个 component 在不同的页面需要不同的 media-query 来进行具体调整
文件结构
├── components
│ ├── _button.scss
│ ├── _grid.scss
├── pages
│ └── _top.scss
│ └── _guide.scss
Trumps
放各种 helper
最主要的作用是用在不适合或者不容易放在 Component 的时候
比如 margin，很可能不应该放 Component，这时候可以用 Trumps 来微调
这样可以防止你的 Component 变得非常大
只有这一层才可以使用!important，以此来避免多个!important 的混乱局面
.u-color {
&--white {
color: $white !important;
}
}
.u-hidden {
display: hidden !important;
}
文件结构
目前发现两种文件结构
1. 每个 layer 一个文件夹
https://github.com/ahmadajmi/itcss
2. 名字的前缀用 layer 的名字
https://github.com/itcss/itcss-netmag/tree/master/css
目前采用的是第二种，感觉 CSS 多了以后相对容易管理
参考资料
