HTML/CSS CSS 设计之 ITCSS

heroyct · September 05, 2018 · Last by heroyct replied at September 24, 2022 · 8350 hits

ITCSS 简介

CSS 设计有很多方法论,比如比较常见的OOCSSBEMSMACSS等等

目前的项目中使用了 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! 的地方

image

可以看出这是一个倒三角形

  • 越往下就越具体,越局限于使用在某个具体的画面

layer 的增减

这些 layer 你不需要都使用,根据你项目的情况可以对 layer 进行增减

  • 比如你想像 OOCSS 一样的话,可以删除掉 Objects layer
  • 想向 SMACSS 那样添加一个 Themes 的话,可以在 Components layer 下面追加一个 Themes layer

github 有非常多的 ITCSS 的项目,有兴趣的朋友可以研究下

ITCSS github

下面介绍下每个 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 多了以后相对容易管理

参考资料

heroyct in 写 Responsive 页面的总结 mention this topic. 30 Sep 12:37

这套方法似乎必须依赖 SCSS 来实现是吗

Reply to qiumaoyuan

不需要,直接写 CSS 也行

You need to Sign in before reply, if you don't have an account, please Sign up first.