什么是原子CSS
不同于大家常用的BEM这类规则,原子css就是拆分,所有 CSS 类都有一个唯一的 CSS 规则。例如如下
.w-full{ width:100%; }.h-full{ height:100%; }复制代码
而像这种就不是
.w&h-full{ width:100%; height:100%; }复制代码
当我们使用的时候,直接写class名就可以
<html><body><div id="app" class="w-full h-full"></div></body></html>复制代码
原子CSS的优缺点
减少了css体积,提高了css复用
不知道大家是怎么样写css,我之前就是起个名字,然后直接写,例如上面那个app
#app{ width: 100%; height: 100%; font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display:flex; flex-direction: column; justify-content: center; align-items:center; }复制代码
这样的写法当然没问题,但是当你越写越多的时候,你会发现你需要写很多遍flex,很多遍width。这时候你就会自己去拆分,如果你项目里能用sass,你可能会写很多@include,这其实就已经是原子css了
减少起名的复杂度
起className、变量名真的是非常麻烦,而且时间一长很容易忘记,又得重新review代码。
增加了记忆成本
将css拆分为原子之后,你势必要记住一些class才能书写,哪怕tailwindcss提供了完善的工具链,你写background,也要记住开头是bg。
增加了html结构的复杂性
我将上面那个app使用tailwindcss重写一下,他就会变成这样
<div id="app" class="w-full h-full flex flex-col justify-center items-center">复制代码
当然看起来语义化还是不错的,当时当整个dom都是这样class名,势必会带来调试的麻烦,有的时候很难定位具体css问题
你仍需要起class名
对于大部分属性而言,你可以只用到center,auto,100%,这些值,但是有时候你仍需要设定不一样的参数值,例如left,top,这时候你还需要起一个class名
在vue中配置
首先需要安装,注意版本。因为tailwindcss 2.x需要postcss8,当前vue cli中postcss版本还是7。
npm i tailwindcss@1.9.6 -D
然后需要配置postcss.config.js,这里我试验了很多次,才找到同时配置tailwindcss,purgecss,pxtorem的,purgecss也是一个很有用的插件,后面再说。
const tailwindcss = require("tailwindcss");const postcssPurgecss = require(`@fullhuman/postcss-purgecss`);const pxtorem = require('postcss-pxtorem')({ rootValue: 100,//结果为:设计稿元素尺寸/16,比如元素宽320px,最终页面会换算成 20rem propList: ['*'] })const purgecss = postcssPurgecss({ content: [ `./public/**/*.html`, `./src/**/*.vue` ], defaultExtractor (content) {const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || [] }, whitelist: [], whitelistPatterns: [ /-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/ ], });module.exports = { plugins: [ tailwindcss, pxtorem, ...(process.env.NODE_ENV === "production" ? [purgecss] : []), ], };复制代码
然后需要引入相应的tailwindcss模块,它主要有3个模块
- base:css reset,重置默认属性
- components:一些组件样式
- utilities:工具类,也就是最常用的样式封装
因此,我们需要引入这个工具类,我建议直接在main.js中引入import "tailwindcss/utilities.css"
为了方便书写,建议安装相应的vscode插件。
配置purgecss
当你安装完,打包之后你会发现包体增加了很多,这是因为打包时直接打包了整个tailwindcss的缘故,引入purgecss之后,会自动去除没有使用的css,直接减少css的体积。
配置时按照上面的配置文件配置即可。
使用了tailwindcss之后,感觉就是一种全新的css体验,建议大家都用在项目里,这个库很值得使用。