Programmable

Fower is a CSS-in-JS library. When you are writing styles with Fower, you are writing JS, not CSS.

Compared with CSS, JS is more flexible. JS is Turing complete and can use variables, conditions, functions, scopes and other things that programming languages have.

Fower and JSX

I think JSX is a very good technology, most of the time it can replace HTML, it allows you to declaratively describe the UI structure, and is very intuitive and elegant. Fower relies heavily on JSX, and when combined, they can replace native CSS. With Fower and JSX, you can write UI structure and styles declaratively in one place. During the development process, you only need to write JS code. If you are a JS veteran, I believe you will like this development mode.

I believe that managing the structure and style of UI in a cohesive way will gradually become a trend. The booming development of CSS in JS also shows that quite a few people hope to use JS to write styles.

Variable

const textColor = '#000'

<Box color={textColor}>Hello word!</Box>

Condition

<Box color={isTrue ? 'red' : 'green'}>Hello word!</Box>

Function

function getColor() {
  return '#000'
}

export default () => {
  return <Box color={getColor()}>Hello word!</Box>
}