Questions about style approaches about react-with-styles HOT 3 CLOSED

Hey, @kirillvolkovich! Thanks for the kind words, and we're excited you're deriving inspiration from our CSS-in-JavaScript styleguide. Let me try to address your questions.

1. Our two styleguides will likely never overlap other than in the sense that they are two styleguides about CSS.

   • BEM is a philosophy we prescribe to when writing traditional stylesheets because it helps build organizational hierarchies between CSS and HTML when in reality are none (in other words: it's CSS, you can name your classes whatever you want, and HTML tags know nothing about CSS classes).
   • Following a similarly prescriptive naming scheme when writing CSS in JavaScript, especially in the context of React components, isn't quite as necessary because there are real hierarchies and real encapsulation. That being said, we do have a couple of “BEM-like” recommendations for CSS-in-JS that you'll find here.

2. Our implementation of react-with-styles does support theming, and we are currently using it in production. Theming is accomplished through the use of ThemedStyleSheet.registerTheme and subsequently the ThemeProvider component. The documentation for these utilities is here, but let us know if you need clarification.

3. We don't have any sort of “versioning” of components beyond the fact that we ship our internal UI components as an NPM package that uses versioning.

4. Internally we use (React Storybook](https://getstorybook.io/), with a slew of custom enhancements, for cataloging our components. It has been working okay for our current purposes.

Thanks for the link to your project! We'll take a look.

from react-with-styles.

Thanks for quick answer. I have read documentation. It is good-written)

We don't have any sort of “versioning” of components beyond the fact that we ship our internal UI components as an NPM package that uses versioning.

We of course too ship our internal UI components as an NPM package.
Problem is in another plain. Classic BEM naming don't ask question - what will be happened in this situation.
I just explain.

• root-component
  • tab1
    • some-input-v1
    • modal-dialog
      • some-input-v2
      • some-input-v2
  • tab2
    • some-input-v3
    • some-input-v3

All versions of <SomeInput /> can have different styles with same class names.
Some of these classes sometimes break another because there are several same class definitions at one page which can merge in unpredictable way. Upgrade component can be not trivial procedure because you have no any guarantee to all will works well after component update.
Maybe it is our project-specific problem and we do something wrong as we have a little npm dependency hell.
Approaches like css-in-js/css-modules looks like can solve this problem)

By some reasons we use different versions of components at project and we want to any team-member can watch actual documentation to any component version.

Do not bother 😃 Have a nice day.

from react-with-styles.

@kirillvolkovich, we have definitely found that writing CSS in our React components results in fewer CSS breakages, for the reasons you mentioned. Even with react-with-styles, it can be tricky to update a component that is used in 50+ places across a codebase, so I totally understand what you're saying 😉

from react-with-styles.