Skip to content

样式开发指南2、index.less的编写注意事项

chenxi-20 edited this page Jun 26, 2024 · 6 revisions

1. 组件样式在哪写呢?

不卖关子,就是跟主题变量文件vars.less同级的index.less;

为什么要单独写一篇文章来说明这个文件的编写呢?

因为我们的组件库已经发展了很长的一段时间了,包括主题配置系统,主题切换等。所以都需要按照一定的规范开发,index.less也是有规范的,只有遵循这些规范,才能实现完美切入这些能力;

这个文件注意的点:即不能将基础变量写入:比如--ti-base--xxx/--ti-common-xxx等都是基础变量,不能直接写入index.less; 需要再vars.less里面声明组件自己的变量名,间接使用这些基础变量的值;

2. 类名如何命名?

2.1 规范:严格遵循bem规范

2.2 只有一个根元素的类名如何命名?

组件根元素类名的命名严格意义来说,为tiny-组件名。

比如color-picker组件:根元素的类名应为tiny-color-picker,不建议改为其他的。如下图:

image

2.3 有两种根元素的类名如何命名?

一个根元素类名为tiny-组件名,另一个则可以在某尾加一个__wrapper,即tiny-组件名__wrapper。

2.4 以button-group为例《我们实操一下》

从第二个mr中找问题: https://github.com/opentiny/tiny-vue/pull/395/files#diff-4143ae55edbbe0169ee3e77a5a2d083742d2e180b4e8a58826aec4fef7f9c36f

从第三个mr中找问题:

https://github.com/opentiny/tiny-vue/pull/932/files

从第四个mr中找问题:

https://github.com/opentiny/tiny-vue/pull/950/files

找一下上面的mr有哪些问题,这么改的依据是什么?

Clone this wiki locally