Implement your web designs rapidly on the spot!

It takes only 3 minutes to learn this.

What is InstantCSS

InstantCSS is easy, rapid, intuitive and lightweight On-Demand Utility-First Near-Atomic CSS Library.
This makes improved your developer experience by implement any designs directly in markup and immediately reflect feedback.
In addition, InstantCSS parses HTML documents at runtime and render styles, so it can completely replace style files that become bloated whenever updated with a 3.1kb js file(based on gzip).

How to use

Install InstantCSS and add inside your head tag.
that's all

<head>
	. . . . . .
	<script src="/instant-css.js"></script>
	<!-- Automatically generated styles at runtime using MutationObserver by InstantCSS -->
	<style  instant-css="v0.6.9">
		. . . . . .
		.fs\=1\.5{font-size:1.5em}
.ts\=0_0_1_red{text-shadow:0 0 1em red}
.\:after\/ct\=\'\!\'\;inline-block\;ml\=\.1\;fs\=2\;tfo\=center_\.5:after{content:'!';display:inline-block;margin-left:.1em;font-size:2em;transform-origin:.5em}
.\:after\/a\=hello_1s_infinite_linear:after{animation:hello 1s infinite linear}
</style > </head> <body> . . . . . . <span class="fs=1.5ts=0_0_1_red:after/ct='!';inline-block;ml=.1;fs=2;tfo=center_.5:after/a=hello_1s_infinite_linear">that's all</span> </body>

Basic

<!-- By default, class names behave like inline styles -->
<span class="background-color:red color:blue">I'm white letters on a red background</span>

<!-- Because class names use spaces( ) as delimiters, values that contain spaces should use underscores(_) instead of spaces.
A colon(:) can be included in the class name, but can be replaced by an equal sign(=) depending on your preference -->
<span class="border=1px_solid_black">I'm black line border</span>

<!-- Multiple styles or other attributes are also freely applicable in basic grammar -->
<span class="color=red;font-size=calc(8px*2)!important">I'm red letters and 8 * 2px is important</span>

Abbreviation

<!-- For convenience, you can enter (=) instead of (:) -->
<div class="background=red">background:red</div>

<!-- You can abbreviate and use properties with abbreviations -->
<span class="bgc=blue">background-color:blue</span>

<!-- You can abbreviate and use value too with abbreviations -->
<span class="pointer">cursor:pointer</span>

<!-- The default unit is applied to styles such as width and height -->
<div class="bg=blue w=10">background:blue width:10em</div>

<!-- When you use minus(-) or plus(+) in the calc function, spaces are automatically added -->
<span class="fs=calc(30px-5px)">font-size:calc(30px - 5px)</span>

<!-- Values starting with two hyphens automatically wrap the var function -->
<div class="bg=--chambray">background:var(--chambray)</div>

Selector & Pseudo Class

<!-- Classes that start with special characters applied selectors and use slash (/) to distinguish between selectors and styles -->
<div class=">span.target/bgc=red _:nth-child(2n+1)/bgc=blue">
	<span>I'm a blue background</span>
	<span class="target">target</span>
	<span>I'm a blue background</span>
	<span>I'm no style applied</span>
</div>

<!-- The pseudo class is also applied in the same way as the selector -->
<span class=":active/bgc=blue;c=red">When I activate, I become a red letters on a blue background</span>

Priority

<style instant-css="v0.6.9">
	[class][class][class].c\=yellow\!\!\!{color:yellow}
	[class][class].c\=orange\!\!{color:orange}
	[class].c\=red\!{color:red}
	.\>span\/c\=red>span{color:red}
	.c\=blue{color:blue}
	[class].c\=blue\!{color:blue}
</style>

<!-- If you add an exclamation point (!) after the class name, you can change the style's priority using the selector priority instead of important -->
<span class="c=yellow!!! c=orange!! c=red!">i'm a yellow</span>
<div class=">span/c=red">
	<span>i'm a red</span>
	<span class="c=blue">i'm a red</span>
	<span class="c=blue!">i'm a blue</span>
</div>

Media Query

<style instant-css="v0.6.9">
	.c\=red{color:red}
	.fs\=16px{font-size:16px}
	[class].fs\=16px\!{font-size:16px}
	/* Styles with the same prefix are grouped in the same group */
	@media (min-width:768px){
		.\@min-width\=768px\@fs\=12px{font-size:12px}
		.\@min-width\=768px\@c\=blue{color:blue}
		.\@min-width\=768px\@\:active\/fs\=12px:active{font-size:1.25em}
	}
</style>

<!-- Classes that begin with an at (@) apply media queries and use the second at to separate styles from media queries -->
<span class="c=red fs=16px @min-width=768px@fs=12px">if width >= 768: im 12px</span>
<span class="c=red @min-width=768px@c=blue fs=16px! @min-width=768px@fs=12px">i'm blue & 16px</span>
<span class="@min-width=768px@:active/fs=1.25">with selector</span>
<style instant-css="v0.6.9">
	@media not (min-width:768px){
		.\@\!min-width\=768px\@fs\=12px{font-size:12px}
	}
</style>

<!-- Queries with a single feature can use an exclamation point (!) to apply the not logic -->
<span class="@!min-width=768px@fs=12px">if width >= 768: im 12px</span>
<style instant-css="v0.6.9">
	@container (min-width:768px){
		.\@container_min-width\=768px\@fs\=10px{font-size:10px}
	}
	@media screen and (min-width:768px){
		.\@\@screen_and_min-width\=768px\@fs\=10px{font-size:10px}
	}
</style>

<!-- The grammar that uses more complex media queries is as follows -->
<span class="@container_min-width=768px@fs=10px">container()</span>
<span class="@@screen_and_min-width=768px@fs=10px">multi with @</span>
<!-- Media queries also provide some abbreviations -->
<style instant-css="v0.6.9">
	@media (min-width:640px) and (max-width:767px){
		.\@\!width\=640\~767px\@fs\=10px{font-size:10px}
	}
	@media (min-width:768px){
		.\@md\@fs\=12px{font-size:12px}
	}
	@media not (min-width:768px){
		.\@\!md\@fs\=12px{font-size:12px}
	}
	@media (prefers-color-scheme:dark) and (min-width:768px){
		.\@\@dark_and_md\@fs\=12px{font-size:12px}
	}
</style>

<span class="@width=640~767px@c=red">640px ~ 767px</span>
<span class="@md@c=red">768px ~</span>
<span class="@!md@c=red">~ 767px</span>
<span class="@@all_and_md@c=red">all 768px ~</span>

Dark Mode

<!-- In light theme, dark mode styles are disabled -->
<style instant-css="v0.6.9">
	.c\=red{color:red}
</style>

<!-- In dark theme, dark mode styles are applied without media queries -->
<style instant-css="v0.6.9">
	.c\=red{color:red}
		.\@dark\@c\=blue{color:blue}
</style>

<!-- In system theme, the dark mode style is applied as a media query -->
<style instant-css="v0.6.9">
	.c\=red{color:red}
	@media (prefers-color-scheme:dark){
		.\@dark\@c\=blue{color:blue}
	}
</style>

<span class="c=red @dark@c=blue">I'm red letters, but in dark mode, I'm blue letters</span>

<script>
	localStorage.setItem("THEME", "LIGHT") // if THEME is not DARK and true, light theme is applied
	localStorage.setItem("THEME", "DARK") // if THEME is DARK, dark theme is applied
	localStorage.removeItem("THEME") // if THEME is false, theme is follow system settings
	window["instantCss"]() // update style sheet
</script>