Echo JS 0.11.0


tracker1 63 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.
Machy8 63 days ago. link 1 point
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.