HTML/CSS CSS 设计之 ITCSS

heroyct · 2018年09月05日 · 237 次阅读

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多了以后相对容易管理

参考资料

共收到 0 条回复
heroyct 写 Responsive 页面的总结 中提及了此贴 09月30日 12:37
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册