🚀 Dale estilo a tu web React.js más rápido con Stylify CSS

Dale estilo a tu web React.js de forma más rápida e intuitiva con Stylify

50% discount on .EU, .ONLINE, .STORE, .TECH, .SITE, .WEBSITE, .SPACE, .FUN domains.
Code DM241ERDTF

Stylify + React.js + Vite.js. Estiliza tu web React.js más rápido con Stylify. No estudies selectores y sintaxis. Usa sintaxis CSS pura y obtén CSS generado con optimización avanzada para producción.

Para empezar más fácilmente, puedes consultar el Stylify Stackblitz playground 🎮.

💎 Introducción a Stylify CSS

Stylify es una biblioteca que utiliza selectores similares a CSS para generar CSS optimizado basado en lo que escribes.

• ✅ Selectores similares a CSS
• ✅ Sin framework que estudiar
• ✅ Menos tiempo dedicado a la documentación
• ✅ CSS manoseado y extremadamente pequeño
• ✅ No es necesario purgar CSS
• ✅ Componentes, variables, selectores personalizados
• ✅ Puede generar múltiples paquetes de CSS

También tenemos una página sobre ¡qué problemas resuelve Stylify CSS y por qué deberías darle una oportunidad!

🚀 Configuración de React.js

La forma más fácil de Setup el React.js está utilizando CLI:

• Ejecutar yarn create vite app
• Selecciona react o react-ts.
• Luego cd app.

De esta forma obtendrás el esqueleto de la aplicación React.js por defecto.

🔌 Integración CSS de Stylify

Instala el paquete @stylify/unplugin usando NPM o Yarn:

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

Abre el archivo vite.config.js y copia el siguiente contenido en él:

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

const stylifyPlugin = stylifyVite({
	bundles: [{
		// Crear sólo un bundle para todo el proyecto => stylify.css
		outputFile: './src/stylify.css',
		files: ['./src/**/*.js', './src/**/*.ts', './src/**/*.jsx', './src/**/*.tsx'],
	}]
});

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

El último paso, abre el src/main.jsx y añade la ruta a stylify.css:

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

Estilizar la web

¡Si copias el código de abajo en src/App.jsx y ejecutas yarn dev obtendrás un Hello World! 🎉 con estilo:

export default function App() {
	return (
		<div className="text-align:center margin-top:100px font-size:42px">
			¡¡¡Hola Mundo!!! 🎉
		</div>
	);
}

Stylify observa cualquier cambio en los archivos que coincide con la máscara en los archivos del paquete y genera CSS en el src/stylify.css.

Si añades por ejemplo color:blue el CSS se actualizará automáticamente 🎉.

Adelante y prueba Stylify CSS directamente en Stackblitz.com 💡.

Componentes

Para evitar plantillas hinchadas con utilidades, puedes usar componentes directamente en los archivos, donde se utilizan a través de opciones de contenido (espera objeto javascript sin corchetes) o en el compilador 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">¡Hola Mundo! 🎉</div>
		</div>
	);
}

Variables

Si te gusta el código limpio, también quieres evitar valores hardcodeados en los selectores. [Las variables (/es/docs/get-started#adding-a-variable) pueden definirse de la misma forma que los componentes:

/*
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">¡Hola Mundo! 🎉</div>
		</div>
	);
}

Construyendo para producción

Si ejecutas yarn build + yarn preview, el marcado JSX se convertirá en esto:

export default function App() {
	return (
		<div class="a">
			<div className="d">¡Hola Mundo! 🎉</div>
		</div>
	);
}

El CSS también se acorta:

: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}

Configura todo lo que necesites

Los ejemplos anteriores no incluyen todo lo que Stylify CSS puede hacer:

• Puedes mapear archivos anidados en la plantilla
• Estilizar selectores globales
• Definir pantallas personalizadas
• Añade tus macros como ml:20px para margin-left
• Y mucho más

Siéntete libre de revisar la documentación para aprender más 💎.