This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Unocss is briefly introduced

# Reimagine atomized CSS

Atomized CSS is a style of CSS architecture that favors small, single-purpose classes and is named after visual effects.

UnoCSS is an engine, not a framework, as it does not provide a core utility class, all functionality can be provided through presets and inline configuration.

Unocss basically provides all the CSS tools you might need. For example, in a traditional scenario, you might use a preprocessor (SCSS in this case) to generate code like this:

// style.scss @for $i from 1 through 10 { .m-#{$i} { margin: $i / 4 rem; }}Copy the code

The compiled result is:

.m-1 {margin: 0.25rem; }.m-2 {margin: 0.5 rem; } / *... */. M-10 {margin: 2.5rem; }Copy the code

You might create a bunch of usable classes for convenience, but you might also have artifacts in between that don’t work. Even if you only use one of the CSS rules, you still have to pay for the file size of the other rules. Your CSS files will get bigger and bigger as your generation rules go, and so on. But this is completely unnecessary for the perspective of use in the project.

Tailwind, for example, generates several MEgabytes of CSS files. To solve this problem, Tailwind uses PurgeCSS to scan your large pack artifacts and remove rules you don’t need. This allows CSS files to be reduced to a few kilobytes in a production environment. Note, however, that this cleanup only works for build builds, and development environments still use huge CSS files that contain all the rules. This may not be obvious in Webpack, but it has a huge impact in Vite, where everything else loads so quickly.

Combined with the on-demand philosophy of Vite, UNOCSS provides wySIWYG usage. And provide plug-in presets for enhancement, we can use custom rules for rule verification, increase the way of personal development.

Simple to fit

The installation

npm i -D unocss@latest
Copy the code

or

yarn add -D unocss@latest
Copy the code

reference

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue({ script: { refSugar: true } }), Unocss()]
})
Copy the code

preset

import { UnocssPluginOptions } from 'unocss/vite' import { presetUno, presetAttributify, presetIcons } from 'unocss' export default (): UnocssPluginOptions => ({ presets: [presetAttributify (), presetUno (), presetIcons ()], / / to use their own internal default, on-demand reference rules: [[/ ^ z - (\ d +) $/, ([d]) = > ({' z - index: d })], [ 'p-c', { position: 'absolute', top: '50%', left: '50%', transform: `translate(-50%, -50%)` } ], [ 'f-c', { display: 'flex', 'justify-content': 'center', 'align-items': 'center' } ] ] })Copy the code

Custom rules allow us to use regular matches as well as custom values. The second item needs to return the rule corresponding to the usage.

To facilitate testing, some custom special rules are defined below

Projects using


<div z-10 p-c></div>
<div f-c></div>

Copy the code

Generated results:

You can see that our custom rule has been used successfully.

The project is relatively simple to start with. Feel free to try.