Predictable style
One of most cool feature of Fower is the predictable style. In traditional CSS, it's not predictable to override style.
#
Traditional CSSFor 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 () ^
If we reverse it to className="blue red"
to a text, it will be color blue
, too.
SyntaxError: Unexpected token (1:8) 1 : return () ^
The color of text is not depended by the order of classNames, it's not predictable.
#
In FowerIn 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 () ^
If we set props to green400 red400
, the color of text is red400
:
SyntaxError: Unexpected token (1:8) 1 : return () ^
If we set props to green400 red400 blue400
, the color of text is blue400
:
SyntaxError: Unexpected token (1:8) 1 : return () ^
#
Useful use caseWhen we build a reusable component, it's very useful. We can override component style elegantly.
SyntaxError: Unexpected token (1:8) 1 : return () ^