What is the best practice with regards to CSS styling in React [production experience]
I know that there are a few ways to use styling in React, among them:
- normal classes with .css files
- inline-styles in JS
- styled components
There are several resources out there describing them, like:
https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822
but I couldn't find one that is written from the perspective of using a particular way for a longer period.
If you have used any of them for >3 months could you give an overview of the pros/cons based on the daily work experience?
css reactjs
asked Nov 11 '18 at 8:10
Janusz TomasikJanusz Tomasik
11
add a comment |
I know that there are a few ways to use styling in React, among them:
- normal classes with .css files
- inline-styles in JS
- styled components
There are several resources out there describing them, like:
https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822
but I couldn't find one that is written from the perspective of using a particular way for a longer period.
If you have used any of them for >3 months could you give an overview of the pros/cons based on the daily work experience?
css reactjs
asked Nov 11 '18 at 8:10
Janusz TomasikJanusz Tomasik
11
I've worked on projects that used SCSS, styled components, and plain old CSS... All production, all for over a year... Matter of preference...
– SakoBu
Nov 11 '18 at 8:14
This question is too broad for Stack Overflow. Plus there's plenty of info on the internet about the differences between these approaches already, just Google around. Ultimately it's also partly a matter of preference, so give each one a go with a small, simple app and see how it feels, then make an informed choice.
– Jayce444
Nov 11 '18 at 9:10
add a comment |
I know that there are a few ways to use styling in React, among them:
- normal classes with .css files
- inline-styles in JS
- styled components
There are several resources out there describing them, like:
https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822
but I couldn't find one that is written from the perspective of using a particular way for a longer period.
If you have used any of them for >3 months could you give an overview of the pros/cons based on the daily work experience?
css reactjs
asked Nov 11 '18 at 8:10
Janusz TomasikJanusz Tomasik
11
I know that there are a few ways to use styling in React, among them:
- normal classes with .css files
- inline-styles in JS
- styled components
There are several resources out there describing them, like:
https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822
but I couldn't find one that is written from the perspective of using a particular way for a longer period.
If you have used any of them for >3 months could you give an overview of the pros/cons based on the daily work experience?
css reactjs
css reactjs
asked Nov 11 '18 at 8:10
Janusz TomasikJanusz Tomasik
11
asked Nov 11 '18 at 8:10
Janusz TomasikJanusz Tomasik
11
asked Nov 11 '18 at 8:10
Janusz TomasikJanusz Tomasik
11
asked Nov 11 '18 at 8:10
Janusz TomasikJanusz Tomasik
11
asked Nov 11 '18 at 8:10
Janusz TomasikJanusz Tomasik
11
11
I've worked on projects that used SCSS, styled components, and plain old CSS... All production, all for over a year... Matter of preference...
– SakoBu
Nov 11 '18 at 8:14
This question is too broad for Stack Overflow. Plus there's plenty of info on the internet about the differences between these approaches already, just Google around. Ultimately it's also partly a matter of preference, so give each one a go with a small, simple app and see how it feels, then make an informed choice.
– Jayce444
Nov 11 '18 at 9:10
add a comment |
I've worked on projects that used SCSS, styled components, and plain old CSS... All production, all for over a year... Matter of preference...
– SakoBu
Nov 11 '18 at 8:14
This question is too broad for Stack Overflow. Plus there's plenty of info on the internet about the differences between these approaches already, just Google around. Ultimately it's also partly a matter of preference, so give each one a go with a small, simple app and see how it feels, then make an informed choice.
– Jayce444
Nov 11 '18 at 9:10
I've worked on projects that used SCSS, styled components, and plain old CSS... All production, all for over a year... Matter of preference...
– SakoBu
Nov 11 '18 at 8:14
I've worked on projects that used SCSS, styled components, and plain old CSS... All production, all for over a year... Matter of preference...
– SakoBu
Nov 11 '18 at 8:14
This question is too broad for Stack Overflow. Plus there's plenty of info on the internet about the differences between these approaches already, just Google around. Ultimately it's also partly a matter of preference, so give each one a go with a small, simple app and see how it feels, then make an informed choice.
– Jayce444
Nov 11 '18 at 9:10
This question is too broad for Stack Overflow. Plus there's plenty of info on the internet about the differences between these approaches already, just Google around. Ultimately it's also partly a matter of preference, so give each one a go with a small, simple app and see how it feels, then make an informed choice.
– Jayce444
Nov 11 '18 at 9:10
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53246909%2fwhat-is-the-best-practice-with-regards-to-css-styling-in-react-production-exper%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53246909%2fwhat-is-the-best-practice-with-regards-to-css-styling-in-react-production-exper%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I've worked on projects that used SCSS, styled components, and plain old CSS... All production, all for over a year... Matter of preference...
– SakoBu
Nov 11 '18 at 8:14
This question is too broad for Stack Overflow. Plus there's plenty of info on the internet about the differences between these approaches already, just Google around. Ultimately it's also partly a matter of preference, so give each one a go with a small, simple app and see how it feels, then make an informed choice.
– Jayce444
Nov 11 '18 at 9:10