Skip to content
This repository has been archived by the owner on Aug 21, 2023. It is now read-only.

b12-archive/orthodox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 

Repository files navigation

Styles as a JS object
– a strong, universal specification

 

There’s this popular and powerful concept of describing styles as an object in JS:

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

…which later gets compiled into a string of styles:

height: 30px;
width: 20px;

A lot of tools do this – but they handle some edge cases differently. This spec defines a common ground compatible with all of these tools.

Write orthodox styles – they’ll work in React, elm and everywhere!

 

 

It just boils down to three simple rules:

  1. One object maps to one string of style properties separated by semicolons.
const myOrthodoxStyle = {width: '30px'};

// In React + JSX:
ReactDOMServer.renderToString(<div style={myOrthodoxStyle}></div>);
//» '<div style="width:30px;"></div>'

// In Restyle:
restyle({'.my-class': myOrthodoxStyle});
//» '.my-class{width:30px;}'
  1. Whenever you write a property with a dash in its name, just type the dash.
// Bad:
{
  minHeight: '20px',
  WebkitUserSelect: 'none',
};

// Good:
{
  'min-height': '20px',
  '-webkit-user-select': 'none',
};
  1. Always use a string with units for a property’s value.
// Bad:
{
  'font-size': 20,
  'padding-top': 20 * 2,
};

// Good:
{
  'font-size': '20px',
  'padding-top': `${20 * 2}px`
};

 

We made the spec for interoperability between existing tools like:

Expect a test suite for these tools compared against the spec soon.

 

MIT © Studio B12 GmbH

About

Styles as a JS object – a strong, universal specification

Resources

License

Stars

Watchers

Forks

Packages

No packages published