前言
随着前端的发展,对前端页面的要求越来越高,而css的功能也越来越强大,但对于写css样式来说却是非常头疼的的事。因为前端页面的动画要求以及页面布局的精细管控,需要写大量的css。为了解决写css难得问题,目前已经出来了许多css得解决方案,如Tailwind CSS,CSS in JS,sass,less
等。
随着Tailwind CSS
的热度越来越高,使用Tailwind CSS
的项目也是越来越多,但是真没必要为了使用而使用。当前流行的流行的前端框架里,React框架对CSS的处理,官方也没有给出特别好的解决,每个人写样式用到的解决方案也不同,Vue框架本身有着很好的CSS处理,在每一个Vue文件里写的样式,都可以是唯一的。
正文
这里只针对Vue里使用Tailwind CSS
来说明,因为React里写CSS确实没有太统一又简便的解决方案,想用什么都可以。
首先说Tailwind CSS
确实是个好东西,没有必要质疑大佬写出来的东西(我是菜鸡),每一个类名代表一个样式,这样就不会产生样式覆盖以及权重不够的问题,并且当项目足够大时,所构建的css包也是非常小的,同时在生产环境中还会自动删除没有使用到的CSS代码。
就是这样的Tailwind CSS
我为什么不推荐在Vue里面使用呢。主要因为Vue中写样式很容易,上面写好模板语法,定义好class,紧接着就可以在下面写样式,每一个组件内,Vue的样式都是独立的,也就是说大多情况下在Vue里基本不会产生样式覆盖的问题。
写框架一定会有组件化思想,为了更好的模板复用。既然Tailwind CSS
是为了复用样式的,组件也同时是复用样式和模板的,那为什么不在Vue中将组件拆分的更细一些呢?
个人写项目的时候,会把项目中的button
也进行二次封装一遍,当使用时,就只是用自己二次封装的组件,但凡设计图有一些稍许的改变,就只需要改一个组件就可以全局改变这个button
组件,也省去了很大的麻烦。 当然这个事Tailwind CSS
也可以实现,但是改完这个原子样式,会影响到所有使用这个原子样式的内容,可能会产生一些不必要的麻烦。但是改组件内的样式只会修改这个组件,一定不会影响到其他内容。
现在大多情况下都会使用到组件库进行开发,当组件库里的组件样式不满足我们的需求的时候,我们需要进行样式穿透进行更改组件库组件的样式。这个是Tailwind CSS
做不到,还是需要重新在style
标签里写一些样式穿透的样式来改变组件。
如果有一些需求,可能是需要我们点击一个按钮,需要改变一个元素的宽度或者高度,在Vue中本身就很好实现,但是如果拿Tailwind CSS
并不能直接实现。还是需要借助Vue里的动态class才能完成,下面是直接使用Vue实现该需求。
<template>
<button @click="setWidth">改变元素宽度</button>
<div class="box"></div>
</template>
<script setup lang="ts">
//定义两个变量 控制宽高度和显示出现
const boxWidth = ref("500px");
const flag = ref(true);
const setWidth = () => {
//判断一下是否显示隐藏 然后给变量赋值宽高度
flag.value ? (boxWidth.value = "0px") : (boxWidth.value = "500px");
flag.value = !flag.value;
};
</script>
<style scoped lang="scss">
.box {
/*这里使用v-bind绑定boxWidth,动态设置宽高度*/
height: v-bind(boxWidth);
width: v-bind(boxWidth);
border: 1px solid #000;
border-radius: 10px;
background: radial-gradient(circle, #fff, #000);
transition: all 0.5s;
}
</style>
这里就可以动态改变元素的样式了,大多情况下,在Vue里都可以使用v-bind
动态的对元素进行调整改变。
其实这样看来,模板中还是挺干净整洁的,但是如果完全使用Tailwind CSS
来写样式的话。将是以下这种恐怖的画面(官方提供的示例)
这种还只是写样式,就在模板中写这么一大堆了(这里也许是html文件内的,没有特别标注,但是Vue模板中写应该也差不多),还不包括元素本身的属性,事件函数(prop)等都需要写在模板上的参数。如果在一些比较复杂的项目中,也许最后的模板会非常庞大,极不易维护。
另外再说一下Tailwind CSS
的下载量,我们在npm上可以看到Tailwind CSS
周下载量在600多万左右
肯定会有人质疑既然Tailwind CSS
看上面的效果没有太优秀,但下载量还有这么高,难道这么多程序员都不会选择吗?另外看一个数据,就是next.js的下载量。
看着也不少吧,为什么要看next的下载量,它不仅支持Tailwind CSS
,还因为当创建一个新的next项目的时候,会默认选中要下载Tailwind CSS
的选项。
不说一定百分百都会有人选中吧,百分之五十会有的吧。那样默认选中下载Tailwind CSS
的也有一半,这样周下载量提供的人数就已经有200万。那就再看一下react的周总下载量。
react的周总下载量在1800万左右,如果将Tailwind CSS
的下载量,放到这里来看其实也并不算很多。
这里说了这么多数据只是说Tailwind CSS
使用在react里可能解决的问题比较多,但是放眼整个react来说生态中也不是很明显的。在Vue里使用Tailwind CSS
其实会显得很累赘,并不是很好的选择。
结尾
你认为在Vue里使用Tailwind CSS
是在书流氓吗?
写的可能有些乱,感觉没抓住重点,非常抱歉,写的时候脑子有点乱。不足的地方不要吝惜的批评就好了