Inline CSS

Any chance we could do inline CSS like https://lcui.lc-soft.io/ does it?

I'm a huge fan of having everything in one file during prototype phases, makes things so much easier.

 

Inline styles per element seems like a bad practice in my opinion. Is there a point in including the bad parts of HTML in this library? I think it only makes sense to have

style=""

when you can include variables in there ( e.g.

style="width={percentageValue}%"

), just like in React (or React Native).

So if we can have style, can we also bind values in there somehow?

Anyway, I found scoped CSS much better for readability in general when doing static style overrides

 

They can be handy when you just simply want a component to be e.g. 40px wide.

Moving one property to a stylesheet in a separate file seems like overkill, especially if no other component is going to share this.

If you start adding more style properties to the component, or decide it needs to be replicated, it's quick and easy to move it to a stylesheet, but I encounter a few cases where keeping the style inline improves readability and reduces bloat in the code.

 

I'm not talking about a separate file for one small change, I'm talking about something like that example on that website I provided.

Code (CSharp):

1. <style>
2.     .button-hello {
3.       margin: 0 0 0 25px;
4.       width:100px;
5.       b {
6.          color:red;
7.       }
8.       u {
9.          color:orange;
10.       }
11.     }
12. </style>
13. <button class="button-hello">Hello, <b>W</b><u>orld</u>!</button>
14. <button class="button-hello">SecondButton, Hello <b>W</b><u>orld</u>!</button>

vs

Code (CSharp):

1.  
2. <button style="margin: 0 0 0 25px;width:100px">Hello, <b style="color:red">W</b><u style="color:orange">orld</u>!</button>
3. <button style="margin: 0 0 0 25px;width:100px">SecondButton, Hello <b style="color:red">W</b><u style="color:orange">orld</u>!</button>
4.