前言

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！！！