Our great sponsors
-
packages
💎 Monorepository for Stylify packages. Stylify uses CSS-like selectors to generate Extremely optimized utility-first CSS dynamically based on what you write 💎. (by stylify)
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
Stylify CSS is a library that uses CSS-like selectors to generate optimized utility-first CSS. I would be happy for any feedback ❤️. (Please before asking a question checkout the faq.) What are Stylify features 💎? 💡 CSS-like selectors: You don't have to study and search how to write each shortcut ✨ No purge needed. CSS is generated only when something is matched 🔗 Components & Custom selectors are attached to utilities. No duplicated property:value 🧰 Selectors are minified from long ".color\:red" to short ".a" which makes bundles smaller 🔁 You can add custom macros, for example a shortcut like "ml-2" for "margin left" 🧩 You can define components. Within a file, where they are used, or globally 💲Variables can be defined within a file, where they are used, or globally 🎨 Custom selectors can be used to style anything => [div+div]{margin-left:24px} 🖥️ Screens can be combined using logical operands => example for large or landscape lg||landscape:font-size:24px 🌃 CSS variables can differ for screens, prefer-color-scheme => by class or media 🖌️ Helpers like lighten, darken, colorToRgba can help with colors => color:lighten(#000,10) 📦 Bundles can be split into multiple files - for each layout, page, component 🪝 Hooks can be used to modify CSS or output. For example wrapping CSS into layers ✋ You can mark areas to be ignored, so the CSS is not generated for them => code, pre 🤟 Stylify also has plugins, integrations and modules for Nuxt v2 & v3, Vite, Webpack, Rollup, Esbuild and Astro.build.
Related posts
- Faster React apps coding: How to migrate from Emotion CSS-in-JS to Stylify Utility-First CSS
- How to Effortlessly Migrate from Styled Components CSS-in-JS to Stylify Utility-First CSS for Better React Development. | Stylify CSS
- How to Effortlessly Migrate from Styled Components CSS-in-JS to Stylify Utility-First CSS for Better React Development.
- Best Practices for Utility-First CSS
- Using Beautiful Material Themes from Material Theme Builder in Stylify CSS