盘点css中常见的用法：Styled-components (css in js )、csshoudini (js in css）、cssnano（
css-minimizer-webpack-plugin 打包优化，压缩
mini-css-extract-plugin 提取css
）、cssdoodle (组件化)
1.Styled-components
css in js ,首先是一个js组件，css样式写在js里面，一般格式：
2. js in css 在css里面写js 代表csshoudini
注册background-canvas绘制方法。绘制一个圆形
3. css-doodle
css-doodle最大的特点在于可以创建一个css组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
:root {
--rule-emoji :(
:doodle {
@grid: 20 / 100vmax;
grid-gap: 1px;
background: #f9d654;
overflow: hidden;
}
transition: @r(1s) ease;
transform: scale(@rand(.1, 1)) rotate(@rand(0, 360)deg);
:after {
content: \@hex(@rand(0x1F600, 0x1F636)); /*将十六进制转换成unicode编码*/
opacity: @r(.1,1);
font-size: 3vmax;
}
)
}
</style>
</head>
<body>
<css-doodle>
@use: var(--rule-emoji);
</css-doodle>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.6.1/css-doodle.min.js"></script>
<script>
const doodle = document.querySelector('css-doodle');
// 每次点击刷新css-doodle
doodle.onclick = function () {
doodle.update();
};
</script>
</html>
<css-doodle>
@use: var(--rule-emoji);
</css-doodle>
组件的使用方式