Stylifycss.com - Write CSS faster

Write CSS Faster

Stylify uses CSS-like selectors color:blue, width:640px, margin:0_auto along with variables, components, custom selectors to generate optimized CSS dynamically based on what you write.

  • Syntax you already know. Don't waste time studying CSS framework.
  • Less switching between HTML/CSS files
  • Automagic and Extremely tunned CSS optimization
  • Simple CSS Bundles splitting for Layouts/Pages
  • Easily Configurable and Extensible
  • Prepared components




/*
https://stylifycss.com/docs/stylify/compiler#helpers

Helpers can be used within selectors or macros.
For example color:lighten(#000,10) is helper
for lightening color.

You can define your own easily within helpers option.
*/
new Compiler({
	helpers: {
		textPropertyType(value) {
			if (value === 'bold') {
				return 'font-weight';
			} else if (value === 'italic') {
				return 'font-style'
			} else if (value.includes('$')) {
				return 'color';
			}
		},
	},
	macros: {
		'text:(\\S+)': ({macroMatch, selectorProperties}) => {
			const property = helpers.textPropertyType(
				macroMatch.getCapture(0)
			);
			selectorProperties.add(
				property, macroMatch.getCapture(0)
			);
		}
	}
});

Why Stylify instead of CSS or inline styles?

They talked about Stylify CSS

Jorge Baumann.js Full Stack Developer at One Beyond
[🔧] Do you know Stylify? It's an alternative to Tailwind #CSS that goes one step further. 🔤 Known syntax 📈 No learning curve 👩‍💻 Write normal CSS in classes ⚛️ Supports variables and components 🗜️ Works with Webpack, Rollup or Vite
蝉丸ファン Core committer of @webpack
It's similar to the Tailwind but more readable.
Phan An @vuejs core team member
This looks super interesting!
One of the Top Front-End Tools Of 2022 By Louis Lazaris
One of the Top Development Languages on Product Hunt
Mentioned in TLDR.tech newsletter
Mentioned in This Week In React newsletter By Sébastien Lorber
Mentioned by Remix.run maintainer as a tool for generating CSS for Remix By Chance Strickland
Mentioned in Web Tools Weekly as one of the Top 30 Tools of 2022
One of the Best Tailwind CSS Alternatives for 2023
Mentioned as one of the Top 7 Web dev tools that will make your life EASY By Pritesh Kiri
Mentioned in Jamstacked newsletter By Brian Rinaldi
Mentioned in Feature Newsletter By Gabriel Nunes
Lukeshiru Webdev at Vangware
It's like Tailwind's JIT, but without having to learn new classnames, and following a really simple set of "rules". Great library!
Tomáš Pilař Co-Founder & CTO Conviu.com
I recommend looking at stylifycss.com if you don't know that tool yet 👍. Launched on the first try with Symfony and it works like a charm! 👏
Posandu Mapa Fullstack dev
I like how Stylify compresses the utility classes. A good Tailwind CSS alternative.
Tom Ravn Webdeveloper & SysAdmin
Have you heard about Stylify? Similar framework as #TailwindCSS. I guess when you finally learn #CSS using Tailwind you can go level deeper and use Stylify, you will basically write pure CSS into #html.😆
Finn Guha Webdev teacher
Wow, that seems like a promising concept! And one that seems very interesting to me personally. I am always amazed by new and unique concepts of writing CSS.
David Mario Licla Front-End dev at Forma
🤯 Did you know that there is an alternative to TailwindCSS but only using CSS properties? Look it's called Stylify!
Toheeb Ogunbiyi Web-UI Engineer
Utility on steroids, I love this! No weird utility names, almost same as CSS. Chars as class names on production. Colocation of states within the rule makes a lot of sense too. This makes up for readability compared to others.
Rin Full-Stack Developer
Immediately interested when I read features on documentation, give a shot with Astro and absolutely love it.
Michael Andreuzza UI Designer & Front end dev
I like that mangling feature. I was using a library that uglifies the code exactly like that..very useful for some cases.
Oscar Lito M Pablo
We now can easily integrate/use in @stylifycss by @8machy any Material Design 3 ("Material You") @materialdesign themes generated using the new Material Theme Builder! Saves a lot of time!
David Teren Tech Lead & Ruby and Rails Dev
It's one of the tools that enables me to create entirely reactive web, iOS and Android apps with little JS.
Japheth Mutai
Well, I guess we all need to follow @stylifycss to reduce our #CSS related nerve attacks 😂😂.
Yousuf Iqbal Full Stack Developer
This is awesome. Almost zero learning curve 👍!
Ahmad Tahir Fullstack Dev
Wow this looks neat 💯. I'll be checking it out.
Código de Marras Frontend Developer
It's interesting, an alternative to having everything in a single file...
Ahmed Zougari React developer
StylifyCSS is like Tailwind framework but easier to learn and read.
Jean-Baptiste Creator of Ardaria
Interesting project! Keep going guyz 💪
Ngmi
I'm notoriously bad with CSS, giving this a try 👾.
Mubashar Hashmat Manager at Scorp
Extremely awesome 😎.
Xavi
Awesome, I'll try it later.
Shushant Lakhyani Just Ship It Hub
This looks cool!
Mukesh
Seems cool ✌️✌️✌️
Paul⭐Bear
Very cool library!
sam i am
That's nice!
Mugiwara Superfly
Wow wow wow
Ricardo Anaya Full Stack Developer
Cool!
Musa Yazlık
Hmm. I like it. 😁
Rajesh Khadka Tech Lead & Ruby and Rails Dev
May be next tailwind css. 🙃
Ryuse Frontend developer
Interesting
Thiago Teles Fullstack developer at Scriptcase
Nice
Hide Show More Shoutouts

Zero Learning Curve and Faster Coding

Instead of writing CSS and switching between HTML and CSS files use CSS-like selectors. The syntax is similar to CSS. Use _ instead of space and ^ for a quote.

<h1 class="font-size:24px color:blue hover:color:lightblue lg:font-size:32px">
	Hello World!🎉
</h1>

Automatic and Extremely Tunned CSS and HTML Optimization

CSS is dynamically generated into CSS files, it is optimized and HTML is mangled. No unused CSS is generated. No CSS purge is needed. No CSS files have to be created. Thanks to inner algorithm for joining selectors, almost no duplicates are generated.

<!-- Production HTML -->
<h1 class="a b c d">
	Hello World!🎉
</h1>

/* Production CSS */
.a {font-size:24px}
.b {color:blue}
.c:hover {color:lightblue}

@media (min-width: 1024px) {
  .d{ font-size: 32px }
}

Simple CSS Bundles Splitting

CSS bundles can be split into multiple files. It's more efficient than combining CSS manually and it also makes the CSS output smaller.

const bundles = [
	// Use Glob syntax to map files
	{ files: [ 'templates/**/*.html' ], outputFile: 'global.css },
	// Split CSS for layouts
	{ files: [ 'layout.html' ], outputFile: 'layout.css' },
	// And for pages
	{ files: [ 'index.html' ], outputFile: 'index.css' }
];

Intuitive Configuration

Define reusable variables, components and custom selectors to simplify the development. Variables values can be different for each screen. This allows you to change it for dark mode/light mode and desktop/mobile.

const config = {
	variables: {
		primary: '#01befe',
		titleFontSize: '24px',
		// Variables based on color scheme dark/light
		dark: {
			primary: '#fff'
		},
		// Variables based on screen size
		'minw640px': {
			titleFontSize: 38px
		}
	},
	components: {
		'section': 'max-width:1240px margin:0_auto_24px_auto',
		// Dynamic components
		'title(?:--(\\S+))?': ({ matches, variables, helpers, dev }) => {
			const color = matches[1] ?? '#000';
			return `font-size:24px${color ? ` color:${color}` : ''}`;
		},
	},
	customSelectors: {
		'*': 'box-sizing:border-box',
		'h1,h2': 'margin-top:0 margin-bottom:12px md:margin-bottom:24px'
	},
	macros: {
		'ml:(\S+?)': ({macroMatch, cssProperties}) => {
			// ml:24px => will create => margin-left: 24px
			cssProperties.add('margin-left', macroMatch.getCapture(0));
		}
	},
}

Configure Variables, Components and Global Selectors in files, where they are used

Components, Variables and Global Selectors can be defined within a file, where they are used. This encapsulates component CSS and HTML into one file.

<!--
stylify-variables
	blue: '#01befe'
/stylify-variables

stylify-components
	subtitle: 'font-size:24px margin-bottom:12px color:$blue'
/stylify-components
-->
<h2 class="subtitle">Subtitle 1</h2>
<h2 class="subtitle">Subtitle 2</h2>

Extend Functionality with Hooks

Hooks can be used extend functionality and modify the output during compilation. There are hooks for Compiler, Bundler and in browser for Runtime.

// This hook example converts px font size
// to REM and automatically calculates line height.
import {hooks} from '@stylify/stylify';

hooks.addListener('compiler:newMacroMatch', ({selectorProperties}) => {
	const pixelUnit = selectorProperties.properties['font-size'];

	if (typeof pixelUnit === 'undefined' || !pixelUnit.endsWith('px')) {
		return;
	}

	const pixelFontSize = Number(pixelUnit.slice(0,-2));
	const remFontSize = pixelFontSize / 10;

	selectorProperties.addMultiple({
		'font-size': `${remFontSize}rem`,
		'line-height': `${remFontSize * (pixelFontSize >= 28 ? 1.2 : 1.7)}rem`
	});
});

Start using Stylify CSS with your favorite tool in a minute.

Use prepared components

Material Theme Builder Integration Guide

Don't study frameworks. Focus on coding!

As a developer you want to code your website easily, quickly and without spending much time in Docs. Frameworks, CSS-in-JS libs, and Preprocessors have a lot of features, that are great, but also makes the development more complex, forces you to study syntax, randomly named selectors and how to use which feature (which you will forget after a week of holiday 🍹).

Stylify focuses on simplicity and uses CSS-like selectors you already know. It's like writing pure CSS directly into the markup without the need of switching between files and figuring out the names for selectors. If you know CSS, you know how to use Stylify.
If you try Stylify, you will find out that preprocessors and short selectors are unnecessary.

Vladimír Macháček
Author of Stylify CSS
Webdev at Slevomat.cz

Latest Blog Posts