怎么合并CSS文件啊?

html-css06

怎么合并CSS文件啊?,第1张

在一个CSS文件利用@import url('其他的CSS文件')

想引入几个CSS文件就用几个@import url

注意路径的的书写

首页需要两个CSS文件index.css和common.css

就在index.css的首行写入(两个CSS文件在同一个目录下)

@import url('common.css')

这样只需要在首页链接一个index.css文件就可以了。

在前端项目中写样式,往往会根据不同的情况给 DOM 元素不同的样式类来实现一些效果。用 React 项目举例,比如定义一个按钮:

再比如定义一个元素是否被激活:

区分这种样式常规的写法:

这种写法让人感觉非常的啰嗦,不优雅。而且如果判断条件和存在的样式类特别多,会写的很长很恶心。

如最常见的 Button 组件,它会有不同的样式、尺寸、显示方式、ghost 等等,这时候使用拼接和判断语句的方式都显得特别麻烦。

此时 classnames 闪亮登场!下面是它的用法:

classnames 很好的解决了按需使用不同样式类的问题。下面是一个 React 例子:

前后对比,明显优雅了很多。

回到按钮的问题,有了 classnames 就可以很好的解决样式类拼接麻烦的问题了。

墙裂推荐 classnames!

合并css文件,只要把各个css文件里的样式放在一个css文件里就可以了,如果有重复的css样式要去掉重复的,至于压缩工具,在百度里面搜一下css压缩工具就可以了,在线压缩的,很方便,你试一下