Write CSS Faster
Stylify generates optimized utility-first CSS dynamically based on what you write.
Write Selectors. Get CSS. Without framework 💎
Use selectors you knowDefine componentsStyle anythingUse variablesCustomize screensExtend functionality
Write selectors as css property:value
. Use __
(two underscores) instead of a space and ^
(hat) instead of a quote. You can also define your own selectors.
<span class="
font-size:32px
lg:font-size:48px
color:#bd0c65
border-bottom:4px__solid__#fff
transition:border-color__0.3s
hover:border-color:#bd0c65
">
Edit me 🤩!
</span>
Loading...
Seamless integration.
Start using Stylify with your favorite tool in a minute.
Loading...
We'd love your Feedback! ❤️
Star our repo, follow us on the Twitter, mention Stylify on a social media and let us know, what you think!
Why Stylify?
Don't study selectors
- With the Native Preset you can use native CSS
property:value
likecolor:blue
as a selector. - Don't study and remember selectors. You already know them.
Copy&paste integration
Get small CSS Chunks
- CSS can be generated for each file, page, layout or component separately.
- Selector is generated only once and reused when possible.
Minify CSS even more
- Shrink long selectors such as
font-weight:bold
to_abc123
. - Minimize your CSS even further.
Style any screen
- Combine screens using logical operands like
sm&&tolg
,xl||landscape
andlg&&dark
. - Dynamic sizes for screens such as
minw640px
minimizes the amount of screens.
Simplify your work
- Define reusable Components, Variables, Helpers and style selectors like
article > h1
with Plain Selectors. - Variables can be injected into the CSS as CSS variables and used outside of generated CSS.
Go ahead, try it now!
Code less. Do more.