🚀 使用Stylify CSS更快地为React.js网站设计样式

用Stylify更快、更直观地设计你的React.js网站风格。

NoLimit Wehosting for $2/month.
Code WN241PJLO2

Stylify + React.js + Vite.js. 用Stylify更快地为你的React.js网站设计风格。不要研究选择器和语法。使用纯粹的CSS语法，并获得生成的CSS与先进的优化，用于生产。

为了更容易入门，你可以查看Stylify Stackblitz playground 🎮。

💎 Stylify CSS简介

Stylify是一个库，它使用类似于CSS的选择器，根据你写的内容生成优化的实用优先的CSS。

• ✅ 类似CSS的选择器
• ✅ 不需要研究框架
• ✅ 花在文档上的时间更少
• ✅ 纠结&极小的CSS
• ✅ 不需要清除CSS
• ✅ 组件、变量、自定义选择器
• ✅ 它可以生成多个CSS捆绑包

我们也有一个关于Stylify CSS解决了哪些问题，以及为什么你应该尝试一下！

🚀 React.js设置

设置React.js的最简单方法是使用CLI：

• 运行yarn create vite app。
• 选择react或react-ts。
• 然后cd app。

这样你会得到默认的React.js应用程序骨架。

🔌 Stylify CSS集成

使用NPM或Yarn安装@stylify/unplugin软件包：

yarn add @stylify/unplugin
npm i @stylify/unplugin

打开vite.config.js并复制以下内容到其中：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { stylifyVite } from '@stylify/unplugin';

const stylifyPlugin = stylifyVite({
	bundles: [{
		// 为整个项目只创建一个捆绑包 => stylify.css
		outputFile: './src/stylify.css',
		files: ['./src/**/*.js', './src/**/*.ts', './src/**/*.jsx', './src/**/*.tsx'],
	}]
});

export default defineConfig({
	plugins: [stylifyPlugin, react()]
});

最后一步，打开src/main.jsx并添加stylify.css的路径：

// ...
import './stylify.css'

塑造网站的风格

如果你把下面的代码复制到src/App.jsx中，然后运行yarn dev，你会得到一个有风格的`你好，世界! 🎉“文本：

export default function App() {
	return (
		<div className="text-align:center margin-top:100px font-size:42px">
			你好，世界! 🎉
		</div>
	);
}

Stylify会观察文件中任何与bundle文件中的掩码相匹配的变化，并将CSS生成到src/stylify.css中。

例如，如果你添加了color:blue，CSS就会自动更新 🎉。

请直接在Stackblitz.com 💡尝试Stylify CSS。

组件

为了避免实用程序带来的臃肿模板，你可以在文件中直接使用 组件，它们通过content options(期望有不带括号的javascript对象)或在compiler config中直接使用。

/*
stylify-components
	container: 'max-width:800px margin:0_auto',
	title: 'text-align:center margin-top:100px font-size:42px'
/stylify-components
*/
export default function App() {
	return (
		<div class="container">
			<div className="title">你好，世界! 🎉</div>
		</div>
	);
}

变量

如果你喜欢简洁的代码，你也想避免选择器中的硬编码值。变量可以用与组件相同的方式定义：

/*
stylify-variables
	titleFontSize: '42px',
	containerWidth: '800px'
/stylify-variables

stylify-components
	container: 'max-width:$containerWidth margin:0_auto',
	title: 'text-align:center margin-top:100px font-size:$titleFontSize'
/stylify-components
*/
export default function App() {
	return (
		<div class="container">
			<div className="title">你好，世界! 🎉</div>
		</div>
	);
}

为生产构建

如果你运行 yarn build + yarn preview, JSX标记将被修改成这样：

export default function App() {
	return (
		<div class="a">
			<div className="d">你好，世界! 🎉</div>
		</div>
	);
}

CSS也被缩短了：

:root {--titleFontSize: 42px;--containerWidth: 800px;}
.b,.a{max-width:800px}
.c,.a{margin:0 auto}
.f,.d{text-align:center}
.e,.d{margin-top:100px}
.g,.d{font-size:42px}

配置任何你需要的东西

上面的例子并不包括Stylify CSS能做的一切：

• 你可以在模板中映射嵌套文件
• 样式全局选择器
• 定义自定义屏幕
• 添加你的宏，如ml:20px表示 margin-left。
• 还有更多

请随时查看文档以了解更多信息 💎。