I've been working with React for a little while but animations is one thing that is confusing me.
Currently I use CSS in my react components. Each component imports a single css file that I use for styling instead of using inline css.
My question is: If I have a page like a landing page where there is no state being updated whether it is fine to use keyframe animations and similar things in css?
Side-question: Am I free to use keyframes for a non updating page like a landing page, or will it totally break for more complicated pages?
You are 100% safe to use any CSS you want in your pages. CSS is merely a language used for describing the style and presentation of your elements. React doesn't care about all that; it cares only for the DOM of your page - or at least the part of the DOM that React created/controls.
The Document Object Model (DOM) [...] provides a structured representation of the document as a tree.
CSS doesn't (cannot) interact with the tree structure of the DOM, nor do CSS animations. They just apply style properties to the elements which, depending on the animation, may give the impression that the layout of your DOM tree changes, but this is not the case.
So to answer both your questions: No css will break your code or otherwise interfere with React, regardless of implementation.
Related
I'm new in React and a new dev in general;
I know that there are many ways to style elements in React itself:
importing CSS,
locally scoped CSS modules,
CSS-in-JS via Styled
Components or Emotion,
utility-first CSS like Tailwind statically
extracted CSS with libraries like "Compiled" and "Linaria",
inline styling
style object variable
and two current APIs to style MUI elements:
Styled and
SX
When it comes to customizing MUI components, it's obvious that it's best to use one of these two; it also seems that using MUI doesn't restrict the use of all non-MUI ways to style things.
So I guess I'm asking about the "best practice", or at least "an ok practice" of minimizing the amount of styling techniques used (so that the code doesn't become bloated).
This, in turn, raises questions that are not answered obviously in the docs:
what's the difference between MUI's styled API and the "styled components" (CSS in JS via emotion that we're talking about) ?
Are there absolutely no conflicts between any of React's styling techniques and MUI APIs ?
are there styling techniques that are conflicting with MUI styling APIs ?
if non-MUI elements shouldn't be styled with MUI APIs, is it then considered a best practice to just style with your one favorite way but stick to this minimum ?
whatever way is best, are there cases when it can't be used solely ?
Example: I need to deal with a non-MUI component: to put it simply, I'm trying to center an SVG which may be either too wide or too thin for the screen and this will change dynamically. All I need is for it to be either 100% height if it's tall or 100% width if it's wide; in such way so that scroll-bars never appear.
As reddit answer says: there turns out to be no conflicts between React's and MUI's ways of styling. You just have to ensure your style’s specificity order is how you want it to be. In large codebases it’s always good to stick to one type of styling, even with MUI. It’s very likely you will need to have some styling for non-MUI components. You could use MUI’s styled(), or css in js or SASS or LESS. There is no one perfect answer - readability, maintainability and performance are your main considerations.
So since MUI's styled() should work for all non-MUI components/elements, I would go with that.
Does inline styling effects a react app load time (FCP, LCP)?
How does it differ from styling in a css file?
Inline styling shouldn't affect react app load time. Furthermore, if there is a chance it affects it, it should lower the time of app render. Anyway, its not recommended to do inline styling, as it makes ur code messy. There are certain cases that u can use inline styling with one rule, but generally its much better to use classes defined in css file
When it comes to inline style within a React component we know it basically is JSX that we are talking about and styling that happens in inline is basically passing an Object to the style prop. Internally ReactDOM takes care of all this.
And DOM styling is managed hence forth. It does differ from loading from CSS file in the same way that you can style in Javascript using imperative approach.
Now coming to the question whether it impacts load speed and you have used (FCP,LCP) in the Bracket.Actually LCP is actually considered only for few elements.
Learn more from https://web.dev/lcp/
Overall I believe, it depends how many style properties are used
inline. And still I believe, It actually increases the load time and
does not decrease it in case of React (because Javascript is involved
not direct CSS file [hence additional work]) for ReactDOM.
I am new to the React javascript framework and have a question about styling using CSS.
Using jQuery, my old workflow was to pick an element on the screen, inspect it in Chrome, note the selector/s that triggered the styling, change the element styling in the browser, and then save it to css/sass etc. If the widget had a hover-state I could make the element visible to see what it looked like.
However using React, and especially for components that someone else has coded, where the component does a 'pop-up' etc, I can't manipulate the DOM to see the component because it is removed from the DOM before I can inspect it.
Now of course I could read the external library code, work out how it works, but CSS inheritance means it would take some time to work out exactly is happening and this seems to be slower than what I was doing before - especially for a simple change.
So my question is, what is the preferred workflow for overloading the CSS for DOM elements that are removed before they can be inspected?
I've written a few Polymer components so far and for my more complicated stuff I love how their styling is isolated from the rest of the page. It's been much easier to use them across multiple apps.
However, today I'm creating a super simple component, and I'm realizing that I'd really like to have the page's styles bleed in. I've got a component that packages up a bunch of logic, but just renders a basic <a href> link. Is it possible through CSS or other means to have that link inherit its styling from the rest of the page?
appyAuthorStyles used to be great for this. Unfortunately, it's no longer in the Shadow DOM spec.
Your two solutions are:
Create a small stylesheet (e.g. shared.css) that includes the common rules the page and component use.
Use ::shadow and /deep/ to style the link from the outside, the same way as the page styles its links.
I'm using jQuery mobile to create a list menu.
I use a 'slide' effect, when you click an element to show the next page.
I was using a css style sheet which had too many design elements.
So I went ahead and removed the stylesheet and instead added the required styling in the html document.
But now the slide effect doesn't work if I click the elements.
If I include the css style sheet, then it starts working again.
Here is the http://jsfiddle.net/r24XY/ code.
The whole reason why you see those cool looking animations is because of that CSS file.
You must have both JQuery Mobile .js and .css library files in order for things to move.
Ripping certain elements out of the library CSS files just to build your own is a bad idea, very bad idea. What if you miss something ? Even if you don't.. what if they release an update tomorrow? You're going to have to maintain a lot of code.
CSS animations (or transitions / transforms) are used in jQuery Mobile and other mobile web frameworks since these are hardware accelerated on certain devices (namely iOS). Thus, removing the CSS file of course removes the animations.