Hi,
nobody forces you to use Stylify and the same arguments, you write against utilities could be used against vanilla CSS.
From your perspective, it might look the way you wrote. Yes, Bootstrap is a well-known component framework, no doubt about that. But that doesn't mean, new tools cannot be created, otherwise, we would still be stuck with for example jQuery.
Stylify is inspired by Tailwind, it has similar features but also those, that Tailwind doesn't have, like splitting, mangling, smaller CSS bundles, it's faster and easily configurable. Yes, it doesn't have a such community or color palettes/themes, it's a new tool and framework palettes often don't make much sense as they don't match project needs.
Vanilla CSS is a great way to style a website. It's the "end product" of all frameworks. However it's not that simple to write it in optimized way and frameworks, like Stylify and Tailwind, automatize and simplify some work you have to do while working with the vanilla CSS (duplicates, unnecessary high specificity, purging, optimization, reusability) https://stylifycss.com/docs/get-started/why-stylify-css.
But I understand that you might not see it as a benefit. In the end, use what you like.
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.