I'm building my first proper React app and I have a question about theme vs. component CSS: how do you manage it?
I understand and love the idea of keeping a component's appearance tied to the component itself. That makes a great deal of sense to me. But how do you work with more global visual stuff - I'm thinking colours, corners, that kind of thing? It makes sense to me that all that should go in a global stylesheet, but I can't see how that won't lead to splitting component CSS between stylesheets, which I think it's the idea to avoid doing.
I'm a slow thinker - please feel free to explain this as if I'm 6 years old.
We usually have common styles folder with variables(LESS/SASS
), and styles of common components like buttons, inputs etc. Also we have a styles folder for parts of app, like auth app, there we keep styles for components unique to this application part or redefinition common styles.
Buts it's just our structure, and i think it's nice for reuse.
Related
I recently inherited an existing web application built in ReactJS. I'm not an expert in either React or SASS, but as best I can tell, this app handles styling by...
Having a bunch of small .scss files, split up logically by things like color variables, font faces, button styling, etc.
Importing all of those into one big app.scss file.
Importing that into the index.jsx of the React app.
I've confirmed that changes to the partial files correctly cascade throughout the whole app.
Now, my employer wants to implemented white-labeling of this application, and part of that means letting our customers change certain things in the stylesheet, such as colors. My instinct is that I could, for example, create a new partial scss file for each of our customers, with different values for the color variables, and load this instead of the default _colors.scss that always gets loaded at the moment.
However, given the import flow, I'm not sure this is possible. I won't actually know which customer is using the app until the app has loaded and called the server--meaning the SASS has already been compiled and served, so it's much too late to intercept the imports during React compilation.
Am I understanding correctly, and if so, is there a best practice or "SASS way" for switching or overwriting stylesheets dynamically? Could React import a new stylesheet, or even recompile the SASS while running?
Off the top of my head, all I can think to do is load a new stylesheet from the server with selectors for every element that needs its styling overwritten, and that would be extremely fragile (and probably loaded with !important). I would love to find a cleaner way to do this.
Ninja Edit: I suppose I could also pull the changeable styles out of the SASS environment into their own stylesheet and do something like this: Dynamically load a stylesheet with React. But I think that would be a mess, as I would be abandoning SASS's ability to define variables, and the color variables (for example) are everywhere.
Thanks so much for any advice or guidance! Let me know if I can provide any more information.
I need to make a clarification here.
I have used sass for styling. I went along only with editing custom.scss file.
Say I create an enterprice level project,say E commerce site.
Is it a best practise or a convenient way to add component wise scss modules for each component?.
Say it is a huge site with so many components, is it good to have so many custom css or just use one css file?
I am a bit confused here.
It depends. If you have a large project, but you have components that you use often, it's worth styling them individually.
On the other hand, there is general styling, for example, the font or even the background. Here it is no question that this belongs in a general stylesheet.
Everything in between is always situation-dependent. I tend that if the component is well capsulated, style them individually.
I'm developing a frontend application that must be responsive at least for desktop and mobile resolutions.
I'm wondering what's the recommended way to structure the codebase.
Searching online various solution I found:
using something like tailwind where in every tag I can specify some "responsive" class which activate only at specific breakpoints
using #media-queries
using libraries like react-responsive
Using approach 1) I feel like the component is very messy and difficult to read: every line, every tag could be rendered or not based on classes applied. Understand what is rendered desktop or mobile side is madness.
Approach 2) is pretty ok but you have the css outside of the component.
Probably it's right to have the css outside the component for someone but I think that react encourage to encapsulate even this kind of aspect inside the component, right?
Approach 3) is basically like the approach 2) but encapsulating it in the component.
What it's not clear to me is:
are these the only approaches that are recommended nowadays?
when using something like 1) or 3) should I create N different version of the same component, where N is the number of breakpoints that I should support? Or the component should be only one with conditional logic that use different styles based on the resolution?
Duplicate the components makes all more clearer to read but has the downside that maintain all these duplicates could be very difficult (every edit, every fix, should be copy-pasted in every component).
At the same time using only one component with "responsive classes" is harder to read even if you have the advantage to maintain only one class.
What do you think?
Thanks
I am building my first react website, and i wanted to ask what the best practice is when it comes to styling. Does it make more sense to make a different stylesheet for each component or it makes more sense to have the styles for all components in a single stylesheet.
It is best practice to have a common style sheet - styles used between components. In addition, anything component specific I would have in it's own style sheet to avoid polluting your shared style sheet.
From the official docs:
React does not have an opinion about how styles are defined; if in doubt, a good starting point is to define your styles in a separate *.css file as usual and refer to them using className.
For a review of React styling methods, take a look at this (slightly older) presentation by Max Stoiber - Styling React.JS applications. It's a couple of years old but worth a look.
CSS-in-JS has been the most appealing to me. There are numerous techniques/packages, so here is a useful comparison.
I'm pretty new to development. Right now working on an webapp in my freetime.
Backend will be written in Python (here I have the best experience).
How good is the Idea to mixing React components:
like: https://github.com/brillout/awesome-react-components
My Idea was to use these components or let others create components for me (for example a slide show or whatever)
The question is, is this a good Idea? I'm worry that this might create a lot of overhead. For example one component is based on bootstrap and the other on foundation (As I said I'm not experienced web developer and can't judge if this can actualy really happen).
Thanks!
The idea of React components is to have the smallest piece of code you can define.
However, mixing different CSS frameworks, like Bootstrap or Foundation doesn't sound like the best idea. You can, of course mix ready-made components (like React-Bootstrap) with your own custom components, but ideally you would choose one framework and stick with it.
The good thing about React is that you can possibly switch between Frameworks without the need of refactoring everything.
Let's say, for instance, you have a custom component called Slider. If you later decide to use MaterialUI, depending on your configurations, you could just change the import from import Slider from "./Slider" to import Slider from "material-ui/Slider" and the rest of your code would be untouched.
Pick a CSS / UI framework and stick with it. These days I have been working with Semantic UI and they have good integration with React via http://react.semantic-ui.com/
It is awesome! :)
And in addition to that, you can also build your own custom components.
If you think adding a whole framework to your project is a lot of burden, then you can make everything your own from scratch. (Either (1) using the CSS framework classes for the components or (2) defining your own CSS classes)
And to conclude I also agree to not mix CSS frameworks as there might be conflicts! It's not fun! In my project, Bootstrap was conflicting with Semantic UI, so I just stuck with the latter.