Using Stylify CSS in Vue.js
at stylifycss.com▼1 up and 1 down, posted by
tracker1 1075 days ago. link 1 point ▲ ▼Not to be a detractor, but what problem does stylifycss solve that isn't solved in almost the exact same way with other solutions? Is it just usage/approach/code-style/feel? Aside: I'm not the one who downvoted, would welcome the input from them as well. This is an integration framework for styling JS applications, so it does fit imo.
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.