Responsive values analyzis

responsive-values.jsx

/* Examples of usage */
// I will leave out scaling feature, as we are looking at the API itself.
// styled-system
<Box padding={[2, 4, 8]} />
  
// atomic-layout
<Box padding={2} paddingMd={4} paddingLg={8} />

/* Comparison */
// styled-system
[2, 4, 8]
// Pros:
// - more concise
// - 
// Cons:
// - extra requisite to learn. Why array? What does array index relates to? Is it left-to-right? Is it mobile-first, it is desktop-first?
// - hard to compose viewport-based set of values:
const tabletProps = {
  padding: 4,
  margin: 8
}
<Box padding={[2, tabletProps.padding, 8]} margin={[2, tabletProps.margin, 8]} />

// atomic-layout
<Box paddingMd={2} paddingMd={4} paddingLg={8} />
// Props:
// - straightforward property-type pairs (padding is a number, not a list)
// - prop:value pairs are intuitive
// - verbose (I find it both a pro and a con, as I favor the API that messages me its intent faster. Imagine 5-10 breakpoints. Counting array position of a value may be time consuming)
// - easy to compose a bunch of viewport-related props at once:
const tabletProps = {
  paddingMd: 10,
  marginMd: 20,
}
<Box {...tabletProps} />
// Cons:
// - verbose (some people may find it too verbose)

Please refer to my comparison as the one submitted with close to none prior experience with styled-system. These are some points I had in mind while first examining the API. Familiarity and docs may make things more clear, but I'd like to compare fresh looks.