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
.
If we reverse it to className="blue red"
to a text, it will be color blue
, too.
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
:
If we set props to green400 red400
, the color of text is red400
:
If we set props to green400 red400 blue400
, the color of text is blue400
:
Useful use case
When we build a reusable component, it's very useful. We can override component style elegantly.