You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
First example: using curly brackets to indicate a consecutive style block for a selector
<divclass="placeholder:{italic text-slate-500} placeholder:after:{content-['*'] ml-0.5 text-red-500}">
...
</div>
Second example: using an inline style:
peer-style/name:{classes} - available for peers
group-style/name:{classes} - available for children
style/name:{classes} or file-style/name:{classes} - available for file
To use it in declaring element use it again after declaration otherwise it can just be used as template?
<divclass="
style/shadow-deep:{shadow-[inset_0_2px_0_hsla(0,_0%,_0%,_.25),_inset_0_-2px_0_hsla(0,_0%,_100%,_.25)] focus:shadow-[inset_0_2px_0_hsla(0,_0%,_0%,_.35),_inset_0_-2px_0_hsla(0,_0%,_100%,_.35)]} shadow-deep"></div>
I don't know if things like these been proposed already (sorry if there were). I did some search but couldn't find similar thing (maybe I used wrong wording).
Sometimes I would really like not to repeat a selector:class1 selector:class2 selector:class3 thingy but use selector{class1 class2 class3} instead. So I'm proposing adding curly brackets as a mean to create a consecutive class scope for a selector.
Pros: a nice way to reduce repetition, especially when you've got something like "focus:... focus:... [customSelector]: ... [customSelector]: ... other:... other: ... other: ..." I saw complex components having stuff like that and kinda wasting textual space on repeated selectors
Cons: curly brackets are used in many programming languages as a mean to insert a value to interpolated string. Maybe some other neutral bracket-like thing is better.
Other thing I'd like to propose is inline styles. Maybe the best answer to this is just "Man, just chill and use your .css file" or "Man just export your custom class to module.exports" but I sort of think it could be nice to have an ability to create inline classes directly in html. Especially when you want this thing to be file-scoped and all in one file.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I don't know if things like these been proposed already (sorry if there were). I did some search but couldn't find similar thing (maybe I used wrong wording).
Sometimes I would really like not to repeat a selector:class1 selector:class2 selector:class3 thingy but use selector{class1 class2 class3} instead. So I'm proposing adding curly brackets as a mean to create a consecutive class scope for a selector.
Pros: a nice way to reduce repetition, especially when you've got something like "focus:... focus:... [customSelector]: ... [customSelector]: ... other:... other: ... other: ..." I saw complex components having stuff like that and kinda wasting textual space on repeated selectors
Cons: curly brackets are used in many programming languages as a mean to insert a value to interpolated string. Maybe some other neutral bracket-like thing is better.
Other thing I'd like to propose is inline styles. Maybe the best answer to this is just "Man, just chill and use your .css file" or "Man just export your custom class to module.exports" but I sort of think it could be nice to have an ability to create inline classes directly in html. Especially when you want this thing to be file-scoped and all in one file.
What do you think?
Beta Was this translation helpful? Give feedback.
All reactions