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.
Related
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 jumped into React recently, so I'm very confused about many things. One of them is about how most of people design UI in React.
Before jumping in, I used Bootstrap to design UI of my website by using pre-made components such as buttons, modal views, navigations, and so on. But, figured out I can't use it anymore in React, but I can use React-Bootstrap instead. Is React-Bootstrap still the most popular UI framework in React as well? I'm asking that because I found some other UI frameworks such as Semantic UI or Material UI for React.
Also, I found styled-components. However, styled-components makes me feel like I need to make every component by myself to use which sounds like taking too long time.
As a very beginner, I'm curious about how people usually work on UI in React?
Firstly, There is no clear answer for the problem. In general purpose of styled-components not mean don't use another ui framework. And the companies solve the problems which is spesific with their Engineering Team. They have their own architecture though. But the alone programmers are choose some open source solutions.
Well, Some people use together or alone. It's totally about your project or your style of architecture. But still i would say some stuffs for giving point of view.
In the other hand; the UI Frameworks are solve modular problems. An example: You cannot create a modal with only css even styled-components. you know, you need JavaScript for that.
To use both:
You can use on Elements Semantic-UI(ReactJS or direct element with the className),
You can use styled-components instead of css file for spesific part of your project. As e.g: Main, Aside, Article, Post, TopNavigation etc.
If you prefer to use the styled-components, also you can use same components in React Native. (There is no css file support for React Native. You'll need inline CSS)
To use only div instead of the spesific component, you'll confused after project being bigger. I would recommended you to create for each meaningful Element.
You can combine the open source community UI parts with your own CSS.
You won't need a CSS(Less, Sass) file when you use styled-components. That's mean, you'll work only on your JS files instead CSS files, so you can do dynamic things in your components. styled-components supports almost all CSS features.
To use standalone Semantic-UI:
I prefer Semantic-UI-React instead of ReactJS bootstrap frameworks.
You cannot use the CSS of Semantic-UI-React in React Native. You should choose which is another solution or actually make your own your components architecture.
You are ready to go with every project with Semantic-UI-React for web/mobile site.
You have to learn basics of less-lang.
You can change everything from your theme files which variables.
Lastly,
If you have big project or goal though; nevertheless, i think you should use a UI Framework in learning and adaptive process.
If you are still not sure what you should do you then, you have to try all of them to find your own architecture.
I think in learning process, you have to concern about ReactJS needs(Redux, Router etc.) before CSS.
It's my first answer at Stackoverflow. Hopefully, the answer will help you for your concern.
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.
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.
I really want to minimize the work of ever changing look n feel changes in my website/portal. The changes are sometimes related to only CSS which sometimes wants me to update the name of the classes and most of the times, only internal styles are updated (only in this case changes are transparent). But the real torture comes in when I come to know that there are changes in HTML structure of new style guide and after whole application/widgets need to be updated and aligned according to the new style guide.
Technologies used in the application are: AngularJS, Bootstrap 3
Now, please suggest what would be the best possible way to minimize these style guide changes? Can AngularJS helps me in that?
Thanks,
Jaffy
Is not very clear which are your requirements or why your style guide changes. But is not something should try to fix using Angular or Javascript directly. The classes name shouldn't change pretty much never.. except when your layout changes, otherwise the only change should be on the styles.
What you need is 2 things:
If you use Foundation or Bootstrap, you should use the SASS/LESS
files of them and override the styles , that way if the ui
requirements changes for instance: background-color, or
border-radius for certain components, you only need to go to the
proper .scss or .less file and change the variable value
You can Import the sass version using
bower install bootstrap-sass-official --save
Then configure your grunt/gulp or any other task-builder to build sass for instance, and you can override the bootstrap variables.
A convention for naming your components, and knowledge of OOCSS (Object Oriented CSS) i recommend you to use BEM, is very easy to read once you understand the convention and helps a lot with possible css specificity issues.
I hope this helps, otherwise please update your answer more, to understand where are you standing.