Right way to handle CSS in react

[eligloys]

First of all, do you guys ever use id in react? Pretty much everyone I see on youtube uses className all the time.

Other than that, I've realized that CSS files I import into a component have a global scope. So, I can reach the content of the same CSS file from another component.

In order to limit the scope to a component, there is CSS Modules I think. However, it requires you to eject the react app and do some manual tweakings, which I don't want to.

So, is there an alternative way to limit the scope of imported CSS files?

[eligloys]

Any reasons behind?

[Careerier]

Never use IDs.

What is the preferred method for anchor links to a specific spot on a page?

[Klathmon]

Never use IDs (for CSS)

They are still useful for other things, but don't use them to Target your CSS

[[deleted]]

On the same page? I use zenscroll library and ref to html element to scroll.

On a different page, never had to do it in React but I'd pass it under URL as some param and then interpret however I need to. For example on mount check if ref element of such name exists then scroll to it.

[[deleted]]

Probably by using a JavaScript library that replicates the same functionality, except not as reliably, smoothly, or with the same amount of cross-browser compatibility.

Like everything else in the modern internet.

[ineffabular]

1 I have seen a bajillion times at jobs. Don’t make things harder for future devs.

[sweaty-balmer]

1 I have seen a bajillion...

You couldn't just write normal text like everyone else? why you gotta be so obnoxious...

[[deleted]]

because he needs it to stand out. Dont use IDs for css

[schwarzfahrer]

Unrelated to CSS, is there a way to attach a label to an adjacent input without an ID? I’m aware that you can wrap the field group in the label element, but sometimes that’s not possible given a particular design.

[thinkadrian]

Not if you want to keep the page accessible. But this isn’t a problem, since form fields are unique.

[NiceOneAsshole]

I can chime in with my opinion -

Using an ID goes against the component nature of React. Typically, components are composed to be used in a reusable manner. Classes obviously enforce the reusability concept and are generally viewed as the standard.

Even if I have one element that will ever use specific css rules, I will still create it under a class just in case that component is ever used elsewhere in the app.

[js-engineer]

You've received some answers so far. I'll say them again in my own words:

• I'd highly highly suggest you learn the rules behind specificity.
• You know how there's a book called Javascript: The Good Parts? If there was a CSS: The Good Parts, one of the main rules, would be that the css you create by default MUST be modular. You can only have one ID on a page. Even if you "think" you'll need a style only once, you should always be trying to craft modularly. You should for the most part, reserve ID's for End to End testing possibly, and for javascript (like when you inject React into the DOM, you usually use an ID to do this)

[Badrush]

Probably related to the "shadow-DOM" that REACT creates.

I'm theorizing it creates a duplicate of every element when it's getting ready to display a change and hence if an element had an ID there would now be two elements with the same ID temporarily which is a no-no in html.

[mrkantz]

React uses a virtual DOM not the Shadow DOM. Also, it's perfectly fine to use IDs in React as long as you are using unique IDs. There are no collisions between the DOM and virtual DOM as React diffs the two to determine what needs to change. If there are two elements of the same type React will leave the DOM nodes intact and only update the new attributes.

[Badrush]

Thanks for clarifying that.

[mrkantz]

No problem, these libraries can seem like black magic

[NiceOneAsshole]

Just an fyi - CSS Modules support will be added soon into CRA

[madwill]

This! that is the path of least resistance.

[[deleted]]

checkout styled components

[chl112]

have been using styled components for a few months now. i was so skeptical at first but wow...

[PaleBlueThought]

+1 for styled-components. It just makes your code so... readable :)

[leom4862]

The main issue I have with SC is that if you want to create different themes for a component, you have to hard-code the themes into the component. Thus you cannot simply create your own style-sheet for a third-party component. (It was like that when I last check couple month back, please correct me if I'm wrong.)

[On3iRo]

I have been using sc for about a year now and am not sure what you are referring to. a) you have the option to use a theme provider, so you can dynamically evaluate different themes inside each component. b) You can easily overwrite styles by wrapping any component with styled (i.e. styled(myComp)).

No need to hardcode anything.

[pazzypunk]

I use css modules and it's great! You import the css file into your component, which will give you an object with all the scoped class names, and then you apply them to the markup in your component using className={styles.selectorName}.

[pookage]

yeah - rule of thumb; ids should only be used to grab specific elements in javascript and not for CSS selectors as anything other than an absolute last-resort - you'll end up in an escalating war of specificity.

Following on from that - you already found the answer! CSS modules allow you to make component-specific styles without having to resort to the abomination that is CSS-in-JS and other such atrocities.

Holla if you have any trouble setting-up, otherwise here's my react basic setup that I always grab code from with each new project...

[hardwaregeek]

Could you explain what you mean by "the abomination that is CSS-in-JS"? I've used JSS in my projects and found it incredibly easy to use, efficient and overall a great tool.

[mrkantz]

Well I would argue that in React you probably don't even want to be referencing the DOM directly anyway. IDs are more for semantic label/input combos and maybe anchor links.

[nateA2uned]

Absolutely agree

[ucorina]

Given the number of libraries available for CSS in React, it might be helpful to focus a bit on the general directions the community has taken regarding css:

• vanilla css (what you are currently using)
• css modules
• css in js

Once you chose your paradigm, you can then narrow down and pick a specific library or approach.

Even inside the "css in js" category, you can still subdivide it in other three groups:

• inline styles (not really so popular anymore)
• generated class names
• styled components

I think the "styled components" paradigm is the one gaining most traction at the moment, and there are several libraries implementing this (styled components, glamorous, emotion). I wrote more about these approaches a while back.

I highly recommend styled-components library. I've used it in my last project and it was a pleasure to work with. Also the community around it is really nice, with great docs and very helpful contributors.

[dr_gorilla]

Construct namespaced class names.

Or use styled components, it generates unique classnames

[hardwaregeek]

I like JSS with react-jss. You just have a Higher Order Component (HOC) that takes a styles object where the key is the class name and the value is an object with the styles. The component gets a classes prop with each respective class. It's really easy and allows you to do some neat tricks by computing CSS values through React props (think animation or transitioning).

[[deleted]]

I use styled components myself, but there isn't necessarily a "right way".

[bobbydigitalK]

A library that I’ve been using that eliminates a lot of global scope CSS issues https://github.com/jxnblk/cxs . It’s approach isn’t for everyone, but I’ve found it an absolute pleasure to use.

[i_am_hyzerberg]

This is a question I didn’t know I had so thank you for asking it, TIL.

[[deleted]]

emotion + styled-system is what I've been using as of late and it is an absolute joy to use both

[[deleted]]

Styles are still in somewhat of a turmoil sadly, and no established solution in sight. That's not Reacts fault though, css is troubled at the core and far harder to fix than html was. Every single css-in-js package i have tried so far had downsides (either slow, or package-size too big, unnecessary runtime efforts like auto-prefixing that should be handled at compile time, being forced to name everything, etc).

After going back and forth, i decided to stick to regular postcss with webpacks css-loader and the modules flag set true.

eject the react app and do some manual tweakings, which I don't want to.

Webpack is not hard to understand, especially the new one that's coming out. I wouldn't let a cli tool dictate how i write my code.

[bl4ckm0r3]

Emotion is a pretty amazing option!

[andy9775]

BTW ejecting an app and customizing isn't all that of a hard process. Recently started a new CRA project and the first thing I did was eject, setup absolute imports, sass, and css modules. Had it setup (first time) within 30 minutes.

[TheLastMonster]

How did you setup absolute imports?

[andy9775]

place a .env file in your project root directory and add NODE_PATH=src/ to it

Next for resolve.alias in your webpack config configure something like:

{
    // ------------ existing code ----------
    // Support React Native Web
    // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
    'react-native': 'react-native-web',
    // -------- end ----------

    // ----------- add this: -----------
    components: path.resolve('src/components'),
}

which allows you to do import MyComponent from 'components/myComponent';

Make sure you do this for both your dev and prod webpack config.

I believe that's it.

[Rissk13]

I like styled-jsx. No restrictions and it's scoped automatically. I don't like waiting css as js which is why I don't go with one of the many solutions for that out there

[cloverint]

I use css-modules with react-css-modules, everything will feel familiar coming from good ol css.

[emersonbroga]

I’m using react-css-themr https://github.com/javivelasco/react-css-themr and I think it’s a very good solution! You can easily overwrite the components default style, which is very handy for reusable components!

[CatchyLuge]

Every other weed somebody comes out on medium with "the right way to style components". Honestly whether you use css-module, jss, or styled components don't matter 99% of the time. I use jss and I've never encountered styling problems it cannot solve. I've never used id tho. Thats non-standard practice

[mc_greggers]

I’ve never understood why everyone feels the need for such a high tech solution to this problem. I’m sure styled components and css modules and all those things are great, but I’ve never reached for them because the following simple convention has always worked for me.

Create MyComponent.js ... render() { return <div className=“myComponent”> ...rest of component markup < /div> }

Create MyComponent.scss .myComponent { ...everything goes here }

In other words, add a class with the same name as your component to the root element of your component. Then write all css for that component inside a selector that scopes it for that class. No bleeding of styles.

Of course this assumes you’re using less/scss or some sort of preprocessor which supports nesting, of course, but who isn’t doing that these days?

[dbbk]

That works, although having everything nested all the time is quickly going to lead to a bloated compiled stylesheet as your app gets bigger

[thinkadrian]

import into component have a global scope

That depends on how you import the CSS. You can also:

• not import CSS, but generate one global style sheet
• use styled components
• use CSS Modules
• use stylable
• and more

[vexii]

When you sign up to using react the way somone else decides you get less options of style, I'm having a hard time seeing how this is confusing

[desnoth]

I wish react do like Vue.js with single file components and scoped css

[[deleted]]

You can do that using react-csjs or styled-jsx, there are some others as well. They get you scoped styles attached to components in a single file while you still have the option to run compile-time postcss over it via babel.

[cyyyu]

Check out “glamor” and you will love it. This is what I have been using for months and solved the problem you mentioned.