search

d3dc / classier-react

Use stylesheets for styles, not Javascript
ISC License
1 stars 0 forks source link

Ambiguous modifiers #7

Open d3dc opened 6 years ago

d3dc commented 6 years ago

In the case of bootstrap and tailwind, there are several ambiguous modifiers such as flex and border.

So far these seem to fit two cases:

  1. Default values

As an example, border is the same as border-1, but will conflict with trying to apply colors with border-teal because both have the same prop name (modifier) "border"

If you intend to stack modifiers with defaults, always provide a value:

border={[ 1, "teal" ]}
  1. "Feature flags"

As an example, flex and flex-grow are unrelated and simply turn on a style property.

Always use flags as flags:

flex
flexGrow
flexColumn
d3dc commented 6 years ago

I'm going back and forth on whether something like sass's & would ever be needed