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