Skip to main content

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

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

Result
Loading...
Live Editor

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

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

Result
Loading...
Live Editor

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

Result
Loading...
Live Editor

Useful use case

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

Result
Loading...
Live Editor