A standard for JS styles

tomek-he-him commented 9 years ago

– 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 commented 9 years ago

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 commented 9 years ago

Make a spec. =)

tomek-he-him commented 9 years ago

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

tomek-he-him / ideas

A standard for JS styles #9