Name: Stylify CSS
Rating: 5.0 (1 reviews)

Hi all of the developers out here on Product Hunt 👋. It's Vladimír, from Stylify CSS. After a year of development and testing, we are launching on Product Hunt 🎉. We built Stylify CSS to provide developers a bit different approach for writing CSS. Stylify is a library that uses CSS-like selectors to generate utility-first CSS dynamically based on what you write. It works with any tool and with any file content. No bundler is necessary. How does it work? 🚀 1️⃣ Stylify is a compiler. First, it will find all class attributes in the content 2️⃣ Then it prepares utility for each matched macro like color:red, font-weight:bold 3️⃣ It doe's some optimization under the hood like joining selectors and generates CSS 4️⃣ On production it mangles long selectors => .color\:red {} to short => .a {} What is Stylify trying to solve? 🧐 On first look, it can appear, that it is just a "reinvented style attribute". That the selectors are unnecessarily long. Why not use shortcuts? We all need CSS to style our websites. We know the CSS syntax. But to get the final CSS, we do extra steps like studying preprocessors and framework shortcuts/selectors/syntax (which can be easily forgotten during a long vacation). All of that for just a few characters shorter selector/line. The goal is to use the native CSS syntax, we already know, to write scalable, optimized utility-first CSS without spending a ton of time in docs and without unnecessary abstraction. Because the syntax is similar to the CSS, it's also easy to switch between CSS and Stylify as the syntax is almost identical. For newcomers to the company, there is also no need to learn any framework. It's almost the same like CSS. 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. So what's next? 👀 Try the playground on our website. Install Stylify. Try our integration for Nuxt and Astro. Style some piece of React, Vue, Symfony, or Laravel application. Mainly, let us know what you think. We will be very happy for your feedback 🙏🏼.

Stylify CSS

Maker

4yr ago

CodingNotes

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. And also, congrats on the launch !

@vimfinn Hi Finn, thanks a lot for your comment! ❤️ I am very happy that you like the concept. If you try it or read the docs and get any idea, of what to improve, let me know!