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 .

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

LIVE DEMO

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

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

LIVE DEMO

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:

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

LIVE DEMO

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

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

LIVE DEMO

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

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

LIVE DEMO

Useful use case

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

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

LIVE DEMO