That’s pretty detailed! I’ll have to have a play with it when I have time, but seems like a good approach. I still like the idea of setting up a style object rather than parsing text (type errors can be caught at compile time), although I think both approaches are valid.
This wasn’t done by React, it’s vanilla js. (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference)
I like this, but really think it should be part of a module. Ultimately, while I do see this path leading to easier UI in the short term, it will inherently always fall short of modern UI design.
If we want to be able to make modern looking UIs, we’ll need to use libraries that keep up with that ability on their own. The two big libraries I’ve seen are the WebCore section of Webkit, and possibly Qt. If either of those can be made into a graphics module, it’ll basically mean lifetime support of the cutting edge in UI design practices.
But, once again, for the short term I think your proposal is great.
I’ve edited again my last post (final proposal). I’m using this already for production with my custom components and it is working really well (it doesn’t slow down the user interface and it has simplified a lot my UI settings). I can’t spend more time with this but if anybody wants to build on top of it, take it (consider it released with MIT license).
I’m a bit late to the party, so bear with me if I missed something that was posted years ago.
According to my experience, the first step towards being able to make “modern looking UIs” is to understand what makes a look “modern” in the first place. After all, the ingredients are simple (even got much simpler with current flat looks) and all it takes is to understand the visual idioms of UI design. No code can help you with that. And once you understand the desired look, any code will do.
So whatever latest buzzword technology is used, it won’t make anything look “modern” by itself. The focus should be solely on workflow: What makes the development and design cycle easier?
For me, CSS isn’t the answer. I’d rather like to see a protocol first, for setting layout and design properties on all components uniformly. This protocol may lean on CSS concepts, but needs not necessarily translate to CSS syntax. With a proper protocol in place, any external representation could be used.
Take a look at the « Styled » class code that I posted and feel free to criticize!