Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How do I encapsulate styles? #3324

giltig opened this issue Mar 5, 2015 · 6 comments

How do I encapsulate styles? #3324

giltig opened this issue Mar 5, 2015 · 6 comments


Copy link

@giltig giltig commented Mar 5, 2015

we are converting a big project written with Polymer to React.
The biggest problem we face is the lack of encapsulated styling.
I would like to encapsulate my sass files with encapsulated styles among my components.
In the entire react web site and documentation there is almost no mentioning of styles.
Furthermore in chrome devtools under React plugin you have all the component properties except style. (not like devtools of the regular DOM).
I really like React and what your doing so how are you going to approach this problem?

Copy link

@jimfb jimfb commented Mar 5, 2015

I assume you've seen this document on how we do inline styles:

Our styles behave same as browser styles. We do not yet have a solution as clean as the shadow DOM for style encapsulation, but the web has existed for many years without shadow DOM, so it is certainly possible to design websites using the browser's native style rules :).

One thing that you could do is define a style reset class, which resets the styles to their default, and then you can override the defaults with more specific selectors.

Alternatively, you could create a base inline-style object that has all your default styles, import that object everywhere, and when you want to apply a specific style, you copy that object and override the styles you want to set using Object.assign. If you want to get really fancy, you could have your components do the style merging (with the style-reset-object you create) automatically, so your webdevs can just use the components without seeing the style-reset code.

That's my two cents. cc @spicyj

PS: Since this is more of a usage question rather than a bug in React, I'm going to go ahead and close the issue. Feel free to continue the conversation in this thread (closing the issue mostly just takes it off our radar for dev purposes). An ideal place for questions like this would be StackOverflow.

@jimfb jimfb changed the title Encapsulated style option How do I encapsulate styles? Mar 5, 2015
@jimfb jimfb closed this Mar 5, 2015
Copy link

@sophiebits sophiebits commented Mar 7, 2015

I tend to recommend using BEM-esque class names that are globally unique, usually scoped by component name:

var MyComponent = React.createClass({
  render: function() {
    return (
      <div className="MyComponent">
        <button className="MyComponent__button">Hi!</button>

and then in your CSS, try to avoid using descendant selectors, in favor of single class names. This tends to promote style isolation and separation of components – it makes it easier to compose components without the styles falling apart.

Copy link

@iamdustan iamdustan commented Mar 7, 2015

Suit is another great option because it has great nose tooling (rework) and a conformance validators to provide an automated safeguard that your styles are not bleeding.

Copy link

@romaia romaia commented Mar 25, 2015

This looks like an interesting solution:

Copy link

@kujohn kujohn commented Apr 6, 2015

Another potential solution is

Copy link

@acdlite acdlite commented Apr 14, 2015

I favor inline styles where possible, then when it gets too complex use something like BEM, as recommended by @spicyj. I also like SuitCSS, which pairs well with React in my experience.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants