I'm creating a podcast website for someone. It will be the first project I've developed for someone other than myself. I want to deliver the best quality web application with the best coding ethics..
Is it good or bad practice to style inline React.JS??
CSS styling. You have all the styles in order there so that when a problem comes up you know exactly where to look.
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.
Please let me know how to convert old php site - www.cnc4milling.com into a responsive web. Site using php and css
Your replies will be very appreciated
Best Regards
There is no such thing as converting a site through a tool, or simple technique.
Seeing that site, it seems like you may only rewrite your HTML and CSS code. Try using CSS Flexbox or Twitter's Bootstrap to achieve responsiveness. There are more ways then those I speak of, each with it's own benefits. Study all of those for better understanding of your needs.
And good luck!
I have created an website/application using Angular2. The infrastructure is all set, I have routing completed, sass being processed etc.
I have sections (components) on this website that will display current web standards for our designs (buttons, forms, copy). The purpose of this site is to give our developers a copy/paste solution for markup and sass.
We will most likely create our own css library but they will still need a good visual reference of what each class does and a copy/paste solution.
I know how to develop all the standards, what I don't know how to do is have the DOM display options for the user to copy/paste the code. I could manually enter the code into or tags but this will be hard to maintain and not very clean approach. I'd like to find some solution that will utilize my code and create these tags at run time.
Googling this question leads down the road of using living style guide generators, which i don't want to use... why? I like having the functionality of controlling my own layout and scaling my standards as I see fit with our own technology.
Any ideas?
After exploring this even further I ended circling yet again on documentation tools (KSS) where I would need to rebuild my entire style guide for this functionality using markdown and or JDOCs.
Solution!
Use CodePen, its free to signup however there are some nice to have features for a monthly fee. I easily created my code here using SASS, HTML and CSS libraries. CodePen has a great EMBED feature whereas I could copy/paste html or iframe right to my styleguide.
Problem is now solved, and we have have a dynamic Web & UI Styleguide.
Hope this method helps others in my situation.
I'm developing a Silverlight 4 app that has to live within an existing ASP/HTML based site, which has its own css stylesheet. I want the Silverlight app to share the look and feel of its container application, so I'm wondering about the best way to accomplish this. About the only way I can think of would be to translate the css styles into Silverlight styles (perhaps with an automated tool), but that seems like a lot of work for something that is a pretty common use case.
Is there a better way? Are there existing tools to make this easier? Thanks!
Creating Silverlight styles based on the styles of your site is a good idea. I don't know if there is an automated tool to do this, but your CSS would have to be very long and complex for that to be necessary.
You might consider modifying an existing Silverlight Theme to match your site.