Hi, thanks for the question.
Stylify has a different approach and code style as you said.
Apart from that it has a bunch of other things:
💡 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
The point is to offer a bit different approach to write Utility-First CSS. Without having to study random classes and be able to get optimized CSS without much effort.
Hi, thanks for the question. Stylify has a different approach and code style as you said. Apart from that it has a bunch of other things: 💡 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 The point is to offer a bit different approach to write Utility-First CSS. Without having to study random classes and be able to get optimized CSS without much effort.