Predictable style

One of most cool feature of Fower is the predictable style. In traditional CSS, it's not predictable to override style.

Traditional CSS

For example, if you have some css rule like below:

.red {
  color: red;
}
.blue {
  color: blue;
}

If we set className="red blue" to a text, it will be color blue .

Result

Loading...

Live Editor

<Box className="red blue">Fower</Box>

<Box className="red blue">Fower</Box>

If we reverse it to className="blue red" to a text, it will be color blue , too.

Result

Loading...

Live Editor

<Box className="blue red">Fower</Box>

<Box className="blue red">Fower</Box>

The color of text is not depended by the order of classNames, it's not predictable.

In Fower

In Fower, the style is predictable. The style is depended by the order of Atomic props.

If we set props to red400 green400, the color of text is green400:

Result

Loading...

Live Editor

<Box red400 green400> Fower </Box>

<Box red400 green400>
  Fower
</Box>

If we set props to green400 red400, the color of text is red400:

Result

Loading...

Live Editor

<Box green400 red400> Fower </Box>

<Box green400 red400>
  Fower
</Box>

If we set props to green400 red400 blue400, the color of text is blue400:

Result

Loading...

Live Editor

<Box green400 red400 blue400> Fower </Box>

<Box green400 red400 blue400>
  Fower
</Box>

Useful use case

When we build a reusable component, it's very useful. We can override component style elegantly.

Result

Loading...

Live Editor

function App() { const MyButton = (props) => { return <Box as="button" bgOrange500 p2 white {...props} /> } const Button = styled(MyButton) return ( <Box> <Button>default</Button> <Button bgGreen500 p3> bgGreen500 </Button> <Button bgPurple500 p4> bgPurple500 </Button> <Button bgPink500 p5> bgPink500 </Button> </Box> ) }

function App() {
  const MyButton = (props) => {
    return <Box as="button" bgOrange500 p2 white {...props} />
  }

  const Button = styled(MyButton)

  return (
    <Box>
      <Button>default</Button>
      <Button bgGreen500 p3>
        bgGreen500
      </Button>
      <Button bgPurple500 p4>
        bgPurple500
      </Button>
      <Button bgPink500 p5>
        bgPink500
      </Button>
    </Box>
  )
}