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!
- orthodox – minimal implementation
- orthodox-spec – the spec
It just boils down to three simple rules:
- 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;}'- 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',
};- 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.