Skip to content

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

chenxi-20 edited this page Dec 11, 2023 · 6 revisions

1. 组件样式在哪写呢?

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

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

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

2. 类名如何命名?

2.1 规范:严格遵循bem规范

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

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

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

image

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

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

Clone this wiki locally