小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

Components 相信不用我说大家也知道，翻译过来就是组件的意思。学过Vue的同学都明白，每一个.Vue文件，它都是一个组件。更不用说写React的同学了，万物皆可组件，对吧。

他就等同于OOCSS,

OOCSS -> BEM (进阶版OOCSS)

组建的分类也有很多种，像经典组件（一些使用范围比较广，而且必须存在的组件）。

经典组件：栅格，布局组件。

还有一些自定义组件。

经典组件

一些使用范围比较广，而且必须存在的组件
用过UI 库的同学应该很眼熟吧，每个 UI 库他都给你封装好了CSS 组件。
那很出名的 Ant Design 举例，引用 Ant Design 的文档。

栅格组件

通过 row 在水平方向建立一组 column（简写 col）。
你的内容应当放置于 col 内，并且，只有 col 可以作为 row 的直接元素。
栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 <Col span={8} /> 来创建。
如果一个 row 中的 col 总和超过 24，那么多余的 col 会作为一个整体另起一行排列。

<a-row>
    <a-col :span="12">col-12</a-col> 
    <a-col :span="12">col-12</a-col>
</a-row>

布局组件

再或者布局组件，

<a-layout> 
    <a-layout-header>Header</a-layout-header> 
    <a-layout-content>Content</a-layout-content> 
    <a-layout-footer>Footer</a-layout-footer> 
</a-layout>

这里就不多赘述了，具体可以参考官方文档。

See you！！！

CSS架构之Components层

前言

经典组件

栅格组件

布局组件