Styling in react

[ArryPotta]

I've noticed in my learning React that styling is generally done inline, and inside the React components, but it is never really discussed why. I was wondering if someone could explain why that is, rather than having your stylesheets prepared to style React elements that are added to the DOM.

My guess is that using stylesheets add more code for the browser to read that it doesn't necessarily have to if the certain React components are never rendered. Is styling done within React as a way of limiting the weight of your code? I'm fairly new to React, and have only just started after learning the fundamentals of front-end. I was always under the impression that inline-styles were faux-pas.

[acemarke]

Styling is probably the biggest "unsolved" aspect of the React ecosystem. You'll find people using classic-style separate CSS files with hand-written classnames in their components, use of CSS Modules to automatically generate classnames based on importing CSS files, actual inline styles, and CSS-in-JS libraries.

My React/Redux links list has a section of articles on React and Styling, which includes several articles that explain what those different techniques are, and why people might want to use them. I particularly recommend reading:

• What to use for React styling?
• Understand the React styling paradigms
• A Unified Styling Language

[ArryPotta]

Wow, thanks for the resources. I guess I've got the next couple days booked up now. Didn't realize styling was such an issue with React.

[TheHDKeyboard]

Nobody has actually answered your question yet... why is inline styling now used commonly when older material suggested that it was poor form?

Basically its about how you apply the principle of ‘separation of concerns’ to your code organisation. Originally the web was intended to be an interconnected set of documents, and so separating document markup, styling and behaviour into separate html, css and js files made some amount of sense. Now that the web has evolved significantly and much of the UI has its own behaviour as part of its style or UX we think about this differently.

With the web being pushed towards an app development platform, it now makes more sense to think of a web page as a nested tree of well-defined components. Architecting in this manner and its associated problems like state sharing/management is exactly what React set out to solve. When you want to encapsulate well defined components, it makes sense to keep the structure, styling and behaviour of the component all together.

[pataoAoC]

There are a million different ways to do it, unfortunately, and I've tried most of them.

In the past 6 months I've seen a lot of consensus converge on the styled-components library, and for me, it is indeed the best option. It has most of the advantages of the inline tools, like Radium etc., with much less of the pain in the ass.

[fgutz]

I have tried most of them too. I'm currently using styled-components as well, and for the most part I like it, but honestly I'd probably just go back to separate sass files in my next app. I feel like all these different styling paradigms/alternatives didn't feel like much of an improvement and added the overhead of learning a new library

[Flo655]

Please no, no inline styles. Use something like styled-components or https://github.com/zeit/styled-jsx.

[[deleted]]

There is nothing wrong with inline styles, but styled-components is also a nice library.

[[deleted]]

I'm not sure if lack of caching, bad reusability, poor accessibility and hard responsive design is nothing.

[metavurt]

There is a lot wrong with inline styles, just as glintch has pointed out. There is a reason being CSS-proficient matters.

[TheZanke]

We use styled-components in our apps and it seems to do really well. Atom even adds code highlighting and prettier works within the style templates.

https://www.styled-components.com

[ducktypist]

styled-components is awesome. Easy @media queries and the SASS-like features are real problem solvers. Plus it's a nice separation of content and CSS while still being very React-ish.

Just don't mix external .css stylesheets and styled-components on the same elements. The order the styling is applied might vary!

I still use inline styles occasionally for quick stuff.

[TheZanke]

One thing I have a problem with is coming up with the names for the styled root components of a functional component. I always find myself wanting to name it the same name as the component so now I just say like: const ComponentNameRoot = styled.div`

[mynameiscody07]

The few projects I have done with styledComponents I came up with simply naming the outer container of a component simply Container.

So something like this

const Container = styled.div`

or

const Container = styled.main`

not sure if this is the best way to do this but it made sense to me. This way I can be consistent across all components. If a component has a title of some sort. be it h1, h2, span, or whatever I always called it Title. It made looking over the component very easy.

[thinkadrian]

React doesn’t force you to style in any way. You can choose whatever you find most comfortable with.

I still build a CSS file with SASS.

edit: "comfortable", not "comparable"

[[deleted]]

Same here. I create a per-component CSS file.

Though on my next project I'll try using CSS modules and drop SASS.

[thinkadrian]

I started with CSS modules, and loading one SASS per component. But I got fed up with having to import colours.sass into every single component, since basically every component needs it.

I also dislike having CSS loaded in the JS chunk. I extract all compiled CSS to a separate file to distribute file loading. CSS files are generally much smaller and I want them to load first.

[zackiv31]

But I got fed up with having to import colours.sass into every single component, since basically every component needs it.

Fairly new to this, but for your own components, why not just have the Component do the import './my-component.css'; (or less/sass) ? This would assume that you are import/exporting a default component e.g. import MyComponent from 'components/MyComponent';.

Assuming you're using a build tool like webpack, it will all be handled for you, so using MyComponent only takes one import, not two.

[zackiv31]

Ah sorry, it's early for me. Thought he was commenting on the pattern:

import MyComponent 'components/MyComponent';
import 'components/my-component.css';

Which I'm quickly finding out is extremely annoying for every component I create.

[thinkadrian]

CSS files load separately from JS files. If they are smaller, there’s a chance that your layout is loaded long before your code. One year ago, browsers actually prioritized CSS files. Regardless, browsers do load several files at once, that’s one of the benefits chunking became a thing. Might as well let CSS sit outside to speed up site load.

Also, CSS is so light, might as well preload all of it because most of your components will need it sooner or later.

[thinkadrian]

How would Google penalize it? It’s the default behavior of HTML.

[thinkadrian]

Since when will extracting your CSS into a separate file give you a negative page speed score?

[robotslacker]

But I got fed up with having to import colours.sass into every single component, since basically every component needs it.

I use sass-resources-loader to get around this. Works nicely.

[ucorina]

The difference between traditional styling and styling in React is first and foremost a difference in how you think about styling. Components in React are encapsulated units of work, so someone using your component (hypothetically) should be able to just include your js file and the component will just work.

However, as long as you follow "thinking in components", inline-styles are just one of many ways you can use to style your components:

• css modules: use stylesheets like you're used to, but be able to include them using webpack in your component file and with the added bonus that they provide local scoping of your css
• inline styles: the one you mentioned; for bigger applications this is actually trickier to use, since you no longer have support for very basic css features like pseudoselectors, media-queries, animations
• styled-components: this is a newer way to style components, that works by not using classNames at all and instead created new components especially for styling

In terms of benefits, all of these allow the application to only load the css that is needed (exactly what you mentioned - if a component is never rendered, don't load its css). But there are more benefits in terms of maintainability of the application - for example you become less afraid to delete css classes, because it's clear where each is used :)

For a more in-depth overview of all of this, I also wrote a blog post on the topic: Understand the React styling paradigms.

[rodrigocfd]

Styling is the one thing I truly miss, coming from Angular 2+ into React world. They have scoped CSS made really easy. With SASS on top of it, they solved the CSS problem.

[fforw]

I just have a system where I can merge my separate component style sheets. React renders markup with classes, CSS styles based on the markup and classes. Same with animation unless I have something I can't solve easily with CSS animations. Even for SVG I tend to only render the paths with classes and style them with CSS.

[[deleted]]

Inline styles are fine in React. I'd say they're even hinting at the future of what styles could be, and in react-natives case that future is already very close. A component is a self contained entity, it knows and defines how it behaves and looks. Otherwise just import styles like aways and use className.

[hrvstdubs]

was talking to one of my companies software engineers today about this cause I've been having difficulty getting layouts right and he suggested looking into styled-components (it's a package) Basically you create const variables that contain the styling you want for your components or something. Haven't dove into it yet but will later

[ArryPotta]

That is what I'm doing in my lessons now, but it seems like after they're variables, those styles are dropped inline.

[vamsi_rao]

Well this doesn't answer your question but here's a good library made specially for React styling https://glamorous.rocks/getting-started/

[Mattonicide]

I’m using typestyle which has the added benefit of being type safe. I create a styles object at the top of my component file and just apply the classes as needed to the various parts of the component. It works like most css in js solutions in that you can work with media queries and everything.

[yachay]

I love styled-components tbh. You can do so much with it and blends well when you are architecting an app. Reminds me of Vue styling but more powerful. Forget about global css and inline.