A standard for JS styles

[tomek-he-him]

• React’s inline styles
• Cycle.js / virtual-dom / elm styles
• hyperscript styles
• Mithril
• superviews.js
• Restyle
• https://github.com/blakeembrey/free-style

– all of these tools (and some other less popular ones) – turn a JS object of styles:

{
  height: '30px',
  width: '20px',
}

…into a string of styles:

height:30px;width:20px

But there are a bunch of details which can be treated differently:

• dashed names like font-size
• vendor prefixes
• appending px to numbers
• (perhaps there’s more)

Perhaps it would make sense to create a standard for this representation – so that we can reuse styles across these tools. So we can take an object of styles and

• use restyle to render it into a good old class-based CSS stylesheet or
• use the same object to power inline styles in a React component.

We could have interoperable libraries of styles which can be dropped into any of these tools or rendered into CSS just as well.

How realistic is it? It may introduce some breaking changes in edge cases. Is it worth the fuss?

What do you think, people smarter than me?

CC: @staltz @Matt-Esch @Raynos @dominictarr @evancz @zpao @lhorie @davidjamesstone @WebReflection @chrisui @mattdesl @ericelliott

[WebReflection]

But there are a bunch of details which can be treated differently:

• dashed names like font-size
• vendor prefixes
• appending px to numbers
• (perhaps there’s more)

FWIW restyle does already all of them + more and in DOMClass it's used to style CustomElements too (without needing ShadowDOM)

[ericelliott]

Make a spec. =)

[tomek-he-him]

@WebReflection @ericelliott, there’s an MVP readme at https://github.com/studio-b12/orthodox. A proper programmatic spec will follow.