Empezar

Stylify es una biblioteca que utiliza selectores similares a los de CSS para generar CSS optimizado en función de la utilidad bajo demanda. Stylify procesa contenido (de un archivo por ejemplo), encuentra selectores de clase y genera CSS para ellos. Luego hace alguna optimización y genera archivos CSS.

Todo lo que tienes que hacer para empezar a usar Stylify es instalarlo y escribir selectores tipo CSS en atributos de clase. No requiere configuración. No tienes que crear ningún archivo CSS, añadir ninguna configuración o estudiar nada. Si sabes un poco de CSS, ya sabes, como usar Stylify.

Sin embargo, si quieres, puedes usar otras características como Variables, Componentes, Macros y Selectores personalizados. Más sobre ellos a continuación.

Stylify CSS no viene con ningún atajo “Fancy Pants”, temas de color o tipografía predefinida. Te estarás preguntando por qué, así que aquí hay algunas explicaciones para empezar:

• Atajos: Son difíciles de recordar y poco prácticos. Sí, usarlos significa menos tecleo y atributos de clase más cortos a costa de estudiar la sintaxis (que es fácil de olvidar) y una mayor complejidad.
• Paletas de colores: Stylify no proporciona ninguna porque no se ajusta a las necesidades de diseño en la mayoría de los casos. Cuando trabajes en un proyecto, también tendrás que obtenerlas del diseñador del proyecto, del tema descargado o generarlas por tu cuenta usando alguna herramienta como Material Theme Builder.
• Tipografía: Lo mismo que las paletas de colores. Puedes encontrar algunas herramientas y recursos tipográficos y fragmentos tipográficos en la documentación de Stlyify.
• En resumen, el objetivo es apegarse lo más posible a la sintaxis CSS nativa sin configuraciones predefinidas innecesarias que son prácticamente inútiles y sobrevaloradas.

Instalación

Stylify puede funcionar con cualquier herramienta. Para algunas de ellas tiene su propia integración. Si no has encontrado tu favorita háznoslo saber.

Inicio Rápido

La forma más fácil de empezar es jugar dentro de los editores de abajo o copiar los ejemplos y probarlo dentro del Codepen Playground.

Syntax es similar a CSS propiedad:valor con algunas diferencias:

• Usar _ (un guión bajo) para un espacio y ^ (un sombrero) para una comilla.
• Para conservar un guión bajo o un carácter de sombrero, utilice \ (una barra invertida) => \_.
• Para los prefijos de proveedor -webkit, -moz, no añada - (un guión) al principio.
• El patrón sintáctico por defecto es <pantalla>:<pseudoclases>:<propiedad>:<valor>. Las pantallas y pseudoclases son opcionales

color:blue => color azul
hover:color:blue => color azul tras hover
lg:color:blue => color azul para la pantalla seleccionada
lg:hover:color:blue => color azul después de pasar el cursor desde la pantalla seleccionada

webkit-font-smoothing:antialiased

Cuando muchas propiedades se repiten para la misma pantalla o pseudoclase, puedes agruparlas como en el siguiente ejemplo. La sintaxis es <pantalla>:<pseudoclases>:{selectores de estilo divididos por ;}.

hover:{color:blue;font-weight:bold} # Acceso directo para múltiples selectores
lg:hover:{color:blue;font-weight:bold} # Lo mismo pero también para pantalla

<!--
Edit Me 😎!
Write selectors as CSS property:value
Use _ for a space and ^ for a quote
-->
<img src="/images/p1.jpg" class="
		height:120px
		width:auto
		border-radius:4px
		transition:.3s
		hover:scale:1.1
">

<!--
Edit Me 😎!
Write selectors as CSS property:value
Use _ for a space and ^ for a quote
-->
<img src="/images/p1.jpg" class="
		height:120px
		width:auto
		border-radius:4px
		transition:.3s
		hover:scale:1.1
">

.border-radius\:4px{
	border-radius: 4px
}
.height\:120px{
	height: 120px
}
.hover\:scale\:1\.1:hover{
	scale: 1.1
}
.transition\:\.3s{
	transition: .3s
}
.width\:auto{
	width: auto
}

.z{
	border-radius: 4px
}
.zp{
	height: 120px
}
.zo:hover{
	scale: 1.1
}
.dr{
	transition: .3s
}
.cw{
	width: auto
}

<!--
Edit Me 😎!
Write selectors as CSS property:value
Use _ for a space and ^ for a quote
-->
<img src="/images/p1.jpg" class="
		zp
		cw
		z
		dr
		zo
">

Uso de pantallas

Stylify tiene accesos directos predefinidos como sm, md, lg y pantallas dinámicas como minw, maxw, rng. Las pantallas dinámicas son flexibles y la consulta de medios generada depende del valor que elijas al usarlas. Consulta la lista completa. Todas las pantallas generadas están automáticamente ordenadas.

<div class="font-size:12px minw768px:font-size:32px lg:font-size:24px">
	Screens
</div>

<div class="font-size:12px minw768px:font-size:32px lg:font-size:24px">
	Screens
</div>

.font-size\:12px{
	font-size: 1.2rem;
	line-height: 2.04rem
}

@media (min-width: 768px) {
.minw768px\:font-size\:32px{
	font-size: 3.2rem;
	line-height: 3.84rem
}
}

@media (min-width: 1024px) {
.lg\:font-size\:24px{
	font-size: 2.4rem;
	line-height: 4.08rem
}
}

.bo{
	font-size: 1.2rem;
	line-height: 2.04rem
}

@media (min-width: 768px) {
.zz{
	font-size: 3.2rem;
	line-height: 3.84rem
}
}

@media (min-width: 1024px) {
.op{
	font-size: 2.4rem;
	line-height: 4.08rem
}
}

<div class="bo zz op">
	Screens
</div>

Las pantallas también se pueden combinar utilizando operandos lógicos: Logical AND: &&, Logical OR: ||

<div class="lg||landscape:color:orange sm&&dark:color:grey lg&&dark:color:white">
	Combined screens
</div>

<div class="lg||landscape:color:orange sm&&dark:color:grey lg&&dark:color:white">
	Combined screens
</div>

@media (min-width: 1024px), (orientation: landscape) {
.lg\|\|landscape\:color\:orange{
	color: orange
}
}

@media (min-width: 640px) and (prefers-color-scheme: dark) {
.sm\&\&dark\:color\:grey{
	color: grey
}
}

@media (min-width: 1024px) and (prefers-color-scheme: dark) {
.lg\&\&dark\:color\:white{
	color: white
}
}

@media (min-width: 1024px), (orientation: landscape) {
.aaa{
	color: orange
}
}

@media (min-width: 640px) and (prefers-color-scheme: dark) {
.aab{
	color: grey
}
}

@media (min-width: 1024px) and (prefers-color-scheme: dark) {
.aac{
	color: white
}
}

<div class="aaa aab aac">
	Combined screens
</div>

Si desea añadir una pantalla personalizada, puede hacerlo de la siguiente manera:

const compilerConfig = {
	screens: {
		'xs': '(min-width: 400px)',
		// Las pantallas también pueden ser funciones => pantallas dinámicas
		'customScreen\\w+': (screen) => `(min-width: ${screen.fullMatch.replace('customScreen', '')})`
	}
};

Añadir una variable

No es una buena práctica tener valores codificados en el código. Por lo tanto puedes definir variables.

La variable puede ser definida en un contenido (espera un objeto sin corchetes alrededor) cuando se usa localmente o en una configuración del compilador, cuando se usa globalmente.

<!--
stylify-variables
	height: '120px',
	radius: '4px',
	scale: '1.1'
/stylify-variables
-->
<img src="/images/p3.jpg" class="
	width:auto
	transition:.3s
	height:$height
	border-radius:$radius
	hover:scale:$scale
">

<!--
stylify-variables
	height: '120px',
	radius: '4px',
	scale: '1.1'
/stylify-variables
-->
<img src="/images/p3.jpg" class="
	width:auto
	transition:.3s
	height:$height
	border-radius:$radius
	hover:scale:$scale
">

:root {
	--height: 120px;
	--radius: 4px;
	--scale: 1.1;
}
.border-radius\:\$radius{
	border-radius: var(--radius)
}
.height\:\$height{
	height: var(--height)
}
.hover\:scale\:\$scale:hover{
	scale: var(--scale)
}
.transition\:\.3s{
	transition: .3s
}
.width\:auto{
	width: auto
}

:root {
	--height: 120px;
	--radius: 4px;
	--scale: 1.1;
}
.zv{
	border-radius: var(--radius)
}
.zu{
	height: var(--height)
}
.zt:hover{
	scale: var(--scale)
}
.dr{
	transition: .3s
}
.cw{
	width: auto
}

<!--
stylify-variables
	height: '120px',
	radius: '4px',
	scale: '1.1'
/stylify-variables
-->
<img src="/images/p3.jpg" class="
	cw
	dr
	zu
	zv
	zt
">

En una configuración del compilador:

const compilerConfig = {
	variables: {
		fontSize: '24px',
		fontSizeLg: '32px',
		textShadow: '0 4px 8px #379adf'
	}
};

Variables CSS

Stylify intenta ser estricto por defecto. Puede que quieras configurar variables externas, para informar a Stylify, que algunas variables existen pero son externas. Si no quieres configurarlas todas, puedes desactivar la advertencia completamente.

En la configuración del compilador:

const compilerConfig = {
	// Establecer variables externas
	externalVariables: [
		// Comprobación de cadena simple
		'some-color',
		// Definir callback para especificar una comprobación más flexible.
		// Esto marcará, por ejemplo, cada variable que empiece por md-
		// como externa.
		(variable) => variable.startsWith('md-') ? true : undefined
	],
	// Desactiva el error de variable indefinida
	// 'silent' => desactiva completamente la advertencia
	// 'warn' => es por defecto para desarrollo
	// 'error' => por defecto para producción
	undefinedVariableWarningLevel: 'silent'
};

Definiendo un Componente

Cuando queremos reutilizar un trozo de código, por ejemplo para un botón sin duplicar clases, podemos definir un componente. El componente se puede definir en un contenido (se espera un objeto sin corchetes alrededor) cuando se utiliza localmente (un archivo / unas pocas páginas) o en una configuración del compilador, cuando se utiliza globalmente.

<!--
stylify-components
	'image': `
		height:100px
		width:auto
		border-radius:4px
		transition:.3s
		margin:0_8px
		hover:scale:1.1
	`
/stylify-components
-->
<img src="/images/p1.jpg" class="image">
<img src="/images/p2.jpg" class="image">

<!--
stylify-components
	'image': `
		height:100px
		width:auto
		border-radius:4px
		transition:.3s
		margin:0_8px
		hover:scale:1.1
	`
/stylify-components
-->
<img src="/images/p1.jpg" class="image">
<img src="/images/p2.jpg" class="image">

.image{
	border-radius: 4px
}
.image{
	height: 100px
}
.image{
	margin: 0 8px
}
.image:hover{
	scale: 1.1
}
.image{
	transition: .3s
}
.image{
	width: auto
}

.zq{
	border-radius: 4px
}
.zq{
	height: 100px
}
.zq{
	margin: 0 8px
}
.zq:hover{
	scale: 1.1
}
.zq{
	transition: .3s
}
.zq{
	width: auto
}

<!--
stylify-components
	'image': `
		height:100px
		width:auto
		border-radius:4px
		transition:.3s
		margin:0_8px
		hover:scale:1.1
	`
/stylify-components
-->
<img src="/images/p1.jpg" class="zq">
<img src="/images/p2.jpg" class="zq">

En una configuración del compilador:

const compilerConfig = {
	components: {
		'label-icon': 'lg:font-size:48px margin-left:8px',
		label: `
			display:flex
			line-height:1.2
			font-size:32px
			align-items:center
		`,
	}
};

Añadir Macros

En caso de que quieras añadir por ejemplo una variante más corta para margin-left como ml, puedes add macro como en el ejemplo de abajo.

const compilerConfig = {
	macros: {
		'ml:(\\S+?)': (match) => {
			// ml:24px => creará => margin-left: 24px
			return {'margin-left': match.getCapture(0)}
		}
	}
};

Selectores personalizados

Estilizar elementos globalmente puede hacerse usando selectores personalizados. La sintaxis es la siguiente [selectores css]{selectores de estilo divididos por ;}. El carácter & siempre se refiere al elemento actual como en SCSS. Para un espacio use el _ (guión bajo) y para una comilla ^ un carácter de sombrero.

<!-- Cada <a> va a tener color azul -->
<div class="[a]{color:blue}">
	<!-- Cuando el cursor esté sobre el enlace, sólo se subrayará la etiqueta -->
	<a href="#" class="
		hover:text-decoration:none
		[&:hover_.label]{text-decoration:underline;font-weight:bold}
	">
		<span class="icon">&plus;</span>
		<span class="label">Enlace azul</span>
	</a>
</div>

Componentes Preparados

¿Buscas componentes preparados? ¡Te tenemos cubierto!

Guía de integración de Material Theme

Si usted está buscando algunas paletas de colores, hay una guía sobre cómo utilizar Material Theme Builder para generar fácilmente Material Theme para su próximo proyecto.

Configuración avanzada

Echa un vistazo al compilador para más opciones de configuración. El Compiler Config es reutilizable y el mismo para todos los paquetes listados a continuación.

En caso de que quieras usar Stylify dentro del navegador directamente, deberías revisar la documentación Runtime.

Paquetes CSS de Stylify

Stylify viene con múltiples paquetes. Todos ellos pueden ser instalados usando NPM o YARN. Stylify CSS y Profiler también se pueden utilizar directamente a través de CDN:

• @stylify/astro - Módulo de integración para Astro.build
• @stylify/stylify - El núcleo. Genera CSS. Reescribe los selectores.
• @stylify/bundler - Para generar paquetes CSS.
• @stylify/unplugin - Plugin universal para Rollup, Webpack, Vite y Esbuild
• @stylify/nuxt - Módulo para Nuxt.js v3
• @stylify/nuxt-module - Un módulo para Nuxt.js v2 < v3

¡Prueba Stylify CSS con tu herramienta favorita!

Para empezar más fácilmente con tu herramienta favorita echa un vistazo a los ejemplos de integración.