ITCSS:可伸缩可管理的健全CSS架构

itcss

ITCSS介绍

ITCSS——“倒三角形CSS”是一种新的方法论。它将整个CSS项目想象成一个分层的、倒置的三角形。这个分层图形表示了一个能帮你以最有效、最节约的方式组织CSS的模型。

在ITCSS中,每一层都是上一层的逻辑递进。它变得更加明确、有目的性,并缩小了选择器的使用范围。由于我们写CSS是在之前的基础上添加,这意外着我们的CSS本质上更容易扩展。我们不必浪费时间撤销或重写以前的CSS。

这也意味着,每个元素,以及每一种类型的元素,都有它自己的一致、可预测的地方。这使得查找和添加样式要简单得多。 ITCSS,默认情况下,有以下7层。

ITCSSlabels

  1. 设置层:该层包含了项目中的所有全局设置(如基本字体大小、颜色调色板、配置等)。
  2. 工具层:该层包含了全局可用的工具–即混入和函数。全局工具的例子有梯度混入、字体大小混入等。
  3. 通用层:该层是第一个实际产生CSS的层。它很少改动,并且通常在不同项目中保持不变。它包括像Normalize. css、全局盒子大小规则、CSS重置等。
  4. 元素层:该层只包含没有样式的html元素选择器。
  5. 对象层:该层是第一个包含了基于类的选择器的层。
  6. 组件层:该层开始设计有可识别性的DOM元素。
  7. 核心层:该层是具有最高特异性的层,可以覆盖之前的样式。该层大部分声明都带有         !important 。

参考链接

官方网站:http://itcss.io/
开源地址:https://github.com/itcss/itcss.github.io

1 1 收藏

资源整理者简介:tzstone

简介还没来得及写 :) 个人主页 · 贡献了2个资源


直接登录

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1439 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer