orthodox

2019-12-06

orthodox是什么

什么是orthodox,Render a style object into a style string

orthodox使用教程帮助文档

">

Styles as a JS object– a strong, universal specification

tl;dr">TL;DR

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_, elmand everywhere!

packages">Packages

the format">The format

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`
};

compatible tools">Compatible tools

We made the spec for interoperability between existing tools like:

Expect a test suite for these tools compared against the specsoon.

license">License

MIT© Studio B12 GmbH


上一篇:orthodox-spec
下一篇:apostrophe-site
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部