Giters

airbnb / react-with-styles

Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Questions about style approaches

opened this issue · comments

commented

Hello. Love airbnb in open source. You are cool guys =)

In production some of your pages uses css-in-js, some BEM + OOCSS + Bootstrap-like grid. (col-xx)
https://github.com/airbnb/css

You also have css-in-js styleguide
https://github.com/airbnb/javascript/tree/master/css-in-javascript

As I understand react-with-styles is something like adapter to different css-in-js implementations libraries.

  • How do you plan to mix these approaches? Are you moving whole project to css-in-js?
  • How about theming? You have wrote several words about it, but as I understand Airbnb don't use it widely because it no necessity for a project. Is there some examples of real-world usage?
  • How about components versioning + theming? I feel several hidden traps 😃

Now I writing a tool for a handly documenting and catalogue components with versioning support.

Screenshot =)

It already couple of month works well for us. Now It's under active developement/refactoring and in 1-2 two month will be officially released much more mature.

Do you interested in something like this or you are already use some existing or private tool?

I want to include react-in-js live edit possibility with theming support in it and now trying to figure out some questions and find like-minded people with good experience in large projects.

It would be a miracle if you answer here or even better to some detailed article about it appears at medium-like resource.

commented

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.

commented

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.

commented

@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 😉