I am using a component (from an external lib) that has a custom size input which sets the size of the element and applies some additional styling:
<some-element size="small">
In my scss file I use media to apply some styling based on browser width, so I was wandering if there was some way to also set the size input based on this size.
I know I can put two elements with different input in my template lige this
<some-element class="small" size="small">
<some-element class="large" size="large">
and then toggle them using display for the small and large classes.
However, I would like to avoid this since some-element has quite a few inputs and outputs, which would lead to a lot of code duplication since I am using multiple instances of some-element.
Can this be done somehow? Perhaps by setting a size variable in my scss and then reading it in my component? Although I am not sure how to do this while supporting dynamic browser resizing.
Related
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've been using Figma a lot lately to draw / edit images and export them as SVG files so I can quickly use inside my apps' code bases.
There's just one drawback with that: Looking through the SVG code to find out what element is what.
Up to this moment I'm having to go through the SVG manually in order to mark the elements (with classes or ids) so that I can manipulate them properly via CSS or Javascript, what's quite tedious :-/
It would be really convenient to be able to set an id or a class to each element (path, line, circle etc..) via Figma and have it reflected in the exported code, I strongly believe that there must be a way to do so...
So here I ask: Is there a way to set certain CSS **class** or **id** atribute in Figma and have it declared on the svg code that gets exported?
There's a checkbox "include id attribute" in the export section.
It inserts the element's layer name as the id attribute on the resulting svg tag.
yay 🎉
After some research and reads, I found out that the community is quickly moving to a more component-scoped CSS in order to avoid global variables definition using classic CSS stylesheets (https://speakerdeck.com/vjeux/react-css-in-js).
I'm currently working on a data-table based project where I need to render many tabular elements using div as cells. This leads me to a huge duplication on inline style and a not-so-sexy DOM:
I don't want to use any library (Radium, Aphrodite, styledcomponents, CSS Modules) to keep the project "vanilla" and reduce my dependencies (more a request than a wish...).
Is there a best-practice to avoid this huge mess in the DOM?
Maybe, is there a way to generate a class name "on demand" and apply it to the rendered component?
When a JavaScript library creates a <div>, it typically sets a class on the div so that the user of the library can style it him/herself. It's also common, however, for the JS library to want to set some default styles for the <div>.
The most obvious way for the library to do this would be with inline styles:
<div style="application's default styles" class="please-style-me">
...
</div>
However, this will make the application's default styles trump the user's styles. A workaround is to use nested divs:
<div style="application's default styles">
<div class="please-style-me">
...
</div>
</div>
This works great for many styles like 'font' but fails for others like 'position', where the inner div's style will not override the outer div's.
What is the best practice for creating user-stylable elements with defaults in a JavaScript library? I'd prefer not to require users to include a CSS file of defaults (it's nice to keep your library self-contained).
When a JS library has a default set of styles that should be used, but should also be overridden, the JS library should include a separate stylesheet.
JavaScript should avoid adding styles directly as much as possible, and defer all styling to CSS where it's reasonable.
It's common for sets of styles to be toggled on and off. The way to elegantly handle these situations are with CSS classes.
A case where it may not be reasonable to simply use external stylesheets is animation. CSS animations could certainly be used, but for cross-browser support, asynchronous interpolation is used to animate styles from one value to another.
There isn't !notimportant or !unimportant in CSS. And I haven't run into an accepted best practice. It seems like a CSS file is the defacto standard for styles that should be user modifiable.
But if you want to keep things all in one library, I would take your second example, with your application default styles, then append a CSS class to it and prepend something unique to the class name. Then if the implementor wants to override your styles, the implementor could just use !important to override your user styles.
Adding !important to one or two styles in a CSS file shouldn't be a huge deal, but if you're creating a bunch of inline styles, this may not be the best solution.
If I want style sheets for different color themes, how can I keep canvas font and line colors in an external CSS file?
I could make hidden dom elements and use them as varaibles.
I could just use javascript to read the current theme and set the colors using javascript variables but then it defeats the purpose of css files. I also want someone else to edit the styles and colors without having to do javascript.
Is there no way to store a setting in a css file and easily read it with javascript (no ajax or jquery)?
The line color, etc. in a canvas element are not affected by CSS, so there is no way to directly do this. The best you can do is use a data file of some sort that stores an object in JSON format containing appropriate canvas variable values for each theme.
Canvas drawing is independent of CSS. You set fonts and colors using Canvas API methods, not by CSS styling. The best I can think of as a counterpart to an external CSS file is an external JavaScript file where you just assign values to variables used in your code for drawing on canvas. That file could be made very simple, just assignments, so it would not require any substantial understanding of JavaScript to edit it.