Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I am doing some research for a large project which will use reactJs and all html elements will be converted to React Components.
As we all know, css has a big problem with globals so there is a lot of posibility of css conflicts.
There are lots of different options for this including:
Atomic Design
SMACSS
OOCSS
or using libraries like:
Radium
React Style
React Inline
jsxstyle
React JSS
React Inline CSS
React Look
React Statics Styles
All of these have something good but at the same time all are under experiment and missing things.
In other words none of them solve all the css problems in react component styling or some just try to solve a problem that isn't there.
After trying all of them I am half way thinking that I should just link to common styles css files and have a css file specific to each component and target that css file from within the component.
Has anyone here had experience in styling react components in large project and have any feedback on it or suggestions?
I simply cannot make up my mind on just using straight css or javascript for this.
Is there anything I've missed to research?
There's nothing wrong on including CSS with your solution, SASS and LESS are awesome.
However, I personally like inline styles a as a plain JS object because it gives you the whole power of JS, so you can be as dynamic as you want, make the calculations all the calcs you need without pre-processing css, etc...
The React team has been investing in this for a while (React Native already uses this by default) here's a to React Native Styles, and a Presentation from a Facebook engineer, and a Proposal from the reactjs/react-future repo, and there are nice libraries like Radium which helps you a lot.
CSS in JS is surely getting better each day, so yeah, I'd advise on making that jump. :)
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 months ago.
Improve this question
I have question about the correctness of using styled components or another type of css styling in react
I prefer to use styled components in my projects. I agree that ionic components have many functionality out the box that help me work with native platform correctly
but for example ion-text is useless for me because it havent got support for font-size, font-weight in variables.css
so I prefer to create my custom TextComponent by styled components lib.
and there are many cases in my project when comfortable for me to use styled-components instead ionic components
so... the question
does use styled-components effect on my project? Are there some problems of using styled-components instead ionic components
or it will do no effects on my projects and there is no reason to use only ionic components for my UI?
There is no such specifications to use ionic tags only, as you mentioned ion-text.
Mostly ionic components are pre-styled to fit /adjust itself in mobile view as well.
If anyone uses custom styled components/tags considering mobile view and functionality in concern, it don't affect your mobile view.
Just use relative parameters like %, rem etc for designing, it helps in maintaining the view for mobile.
So conclusion is, you can use custom components,it will not affect your project.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I'm learning ReactJS, I know that react is about declaring the way something should render, giving it some data and poof, when the data changes, it renders those changes.
But if I want to manipulate the DOM, an example change a color, create a accordion, make animations, add and remove a class, etc.
React can do that? Could I migrate my jQuery projects to Reactjs without any problem?
There are many approaches for that task, a complete list is here in the official Docs. Either use React as a Wrapper on top of your jQuery Application or Translate your jQuery App to a React App.
From the official Docs
React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover.
This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each is doing.
The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React has no reason to update, like an empty .
Here is a medium article that may help you.
How-my-team-converted-our-website-from-jquery-to-react-in-small-steps
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
Some time ago I created a front-end framework in html/css/jquery for dashboard creation for my company (something very complete) using classes like bootstrap.
Only, the new projects of my company will be done in react, and I need to adapt everything. I was thinking of simply importing the scss as several linked files, and use it simply by adapting some parts of the jQuery by the state react, especially for the onHover of the navbar and the header.
Well, this solution is extremely temporary because it implies each time to copy/paste the scss folder, it's not great, and my final goal will be to have a library of react components that you import with a simple npm install, like react bootstrap :
<Button {props} />
<Navbar>
<Navbar.Brand.../>
</Navbar>
But also to be able to use the grid and the "simple" classes which are defined in the css of the library :
<div className="col-6">
<div className="card">
</div>
<div>
My explanation may not be very clear, but basically I'd like to create/use the main components with the lib, and use the scss classes of the lib...
Is this possible? If so, what would be the most suitable solution, knowing that I was thinking of making a library with storybook...
I came across a similar usecase.
You can use https://www.npmjs.com/package/create-react-library npm package.
It will reduce lot of your work.just focus on writing components/scss and check the dist same time with a test application provided by the package.
It works well!
I am in the same boat as you, I created a set of components that I used in one project and needed to use in others without copying and pasting. The best solution I have found so far is Lerna. It will not be easy and there is a big learning curve but after I spent some time on it I was able to get your desired result and have my own private npm packages that my team can install on projects without copying and pasting. Since you want to use storybook this may help.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I noticed in Jira, they have obfuscated the CSS classes, so they look odd and they are different on every page refresh:
<div class="sc-dYaWWc dJrjAK">
<div class="sc-iLVaha hfGHeD">
<div class="sc-geAxOV krrXnm">
<div class="sc-bJT2cE bPFEwh">
<div class="sc-imDrJI jKvdHw">
<div class="sc-hAhkBK epXQAj">
...
What is the motivation behind this, maybe to prevent crawlers or other security concerns? Is it a worthwhile practice for general app development?
The main reason of obfuscated/scrambled CSS class names is the usage of CSS modules to provide style encapsulation and size reduction.
Style encapsulation (and style leakage) is still a great issue on the web, especially when web apps and sites becoming more-and-more complex over their lifetime.
Soon (hopefully), we'll have Shadow DOM capabilities in all browsers, until then some form of modular CSS solution is needed to properly encapsulate styles. Check out this article about it.
In summary:
CSS Modules provide modular,
reusable, and cross-browser solutions for:
Conflictless styles
Direct and clear style dependencies
Avoiding global scopes
React, Angular and Vue use their own solutions to this problem in their build-chain. Most modern MV* frameworks use CSS modules in some form.
And of course, one other benefit of using CSS modules is the initially more complex methods to successfully scrape the content of the specific web page.
Atlassian use react-css-modules for obfuscate and optimize his template for a simple reason:
Obfuscated CSS class names == smaller bundle size == less amount of data to transfer over network.
Obviously the obfuscate class is only on production build not on development stage.
modules property tells Webpack that class names needs to be obfuscated. You can set it to false in dev build and class names will stay the same as in CSS file. That is very useful for development.
Text from How to obfuscate CSS class names with React and Webpack.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am looking to make a slightly responsive design. I was curious to know how people feel on loading a responsive design, should I load in a new css file and use JS to define the screen size. Or should I create media queries inside the current css file and just go from there. Looking for opinion on speed and what people feel is the more optimal approach.
Putting everything regarding styles in the CSS files is the best practice.
HTML => Structure
CSS => Styles
JS => Logic
The more you separate concerns, the easier your code will be to mantain.
As javascript might be disabled you should use CSS-only for the responsive purposes.
If you really can't do without javascript (for moving an element in the dom for example) make sure that you've got some fallback css for non-js-enabled users.
In fact very very few users will disable javascript, unless they are in emergency(say, if they only have outdated mobile phone because their new ones have run out of batteries). If your site is not toward these situations, use javascript without concerning that users will disable.
Generally, putting media queries in one css file will be a good choice if the file size is reasonalbe, since one file makes fewer request than seperated files.
Javascript, on the other hand, is the very fallback because old IEs do not support media queries.
You can refer to some frameworks such as bootstrap. An implementation outdoes all answers.