Currently trying to remove bootstrap CSS as a dependency from a large monorepo.
Specifically, we are using react-bootstrap which requires a default stylesheet imported into a page.
I have successfully removed all custom components and those with logic but there are multiple global styles that break when removing the imported css.
Is there a way to find out all the things that have changed before/after it's removed? Doing it manually is going to be a grueling task. Any suggestions are appreciated.
ALSO: we are utilizing CSS Modules to ensure global styles aren't getting out of hand. It adds another difficulty to this issue. Where would I even put the changed styles if I do find them?
Related
I want to create a UI Component Library where consumers can bundle only the styles for the components they are actually using.
Let's say this question is framework-agnostic since I am more interested to evaluate existing approaches.
The idea would be for a user to be able to
import { Button } from '#mylib/ui`
and not being required to go to their main.ts and add
import '#mylib/ui/styles/main.min.css`
Now, obviously, the first solution is to avoid bundling the CSS together, so a user would be able to import separate stylesheet for each component
import '#mylib/ui/styles/button.min.css';
import '#mylib/ui/styles/accordion.min.css';
Now, this approach works well if you use a handful of components and want to keep the bundle size in check, but it doesn't scale if a consumer starts using dozen of components.
How can I overcome that challenge?
The only approach I can think of is inline styling, which won't work because of missing selectors, media queries, etc.
What I would love to achieve, is a way for consumer to declare what they need, and get the styles for that component without any additional configuration/import, while preserving the ability of only bundle the CSS that belongs to the components that are imported
import { Button } from '#mylib/ui`
I am scratching my head to come up with an idea of how this would work...
I'm building an advanced, full-page WYSIWYG tool using Vue. For this, I need to dynamically render a CSS stylesheet based on JSON blobs that contain CSS properties into the <head> of a page.
What is the most performant way to do this? Vue uses the concept of scoped CSS, which is compiled at build time. It doesn't allow runtime modification. What I need is the ability to modify, compile and render the CSS at runtime.
Current solution
I currently have a regular Vue component, in which I use a reducer to transform the JavaScript into a CSS string, which is rendered inside a <style> tag.
However, this entire string gets re-rendered on every single CSS change. This is not performant enough for my use case.
Desired solution
A solution that would render my CSS rules without relying on a single Vue component, so that it's picked up by Vue's Virtual DOM and benefits from its performance.
Now that I'm writing this, I think it might be a solution to render a Vue component for every single CSS class, but I'm not sure if that would work. I'm curious to hear other perspectives to this problem.
I was using Modal of semanctic-ui-react inside a create-react-app project. Inside index.js I had declared the import for the CSS files of the frameworks
import "semantic-ui-css/semantic.min.css"
import "bootstrap/dist/css/bootstrap.css"
I noticed the weird positioning of Modal. After debugging I found a .modal CSS class was getting applied which was coming from the Bootstrap's CSS. Since semantic-ui also has the similar name classes, this caused the overlapping.
On removing the import "bootstrap/dist/css/bootstrap.css", Modal get positioned correctly.
Solution(partial) in my mind:
import CSS file only in the class where it has been used, and not to the index.js
-this has two problems:
1. Suppose EditForm.js uses semantic-ui, I import the semantic.min.css
directly in this file. But what if it's parent class in which
EditForm.js is used, if parent.js is using bootstrap.css then again
the same problem will occur.
2. I am not sure on this, but importing the complete CSS seperately for each files could make those files heavy, please correct me here.
I want to use both the frameworks in my project, what would be the ideal way?
Do you have to use both of them? if so, another solution to consider is implementing SASS/SCSS in your project.
SASS is usually bundled in alot of webpack-using installations out-of-the-box. I have only used it in vanilla, Vue and Angular projects but i'm 100% sure React would have no problems with it and CRA would be able to generate the necessary configuration for it.
If you installed SASS, you have alot of ways to handle this. Two I would think of though are:
You can decide on one library that is your "main" and import it as normal, while the other one you can "scope" within a css rule. This is possible because SASS automatically unwraps the import and inserts it under that css rule, effectively "Scoping" it. CSS does not do that by default.
.smui {
#import "semantic.css";
}
Read more here: https://sass-lang.com/documentation/at-rules/import#nesting
I didn't check semantic UI's sass support, but Bootstrap is built modularly in SASS which allows you to selectively import the parts you need. So let's say you want to use a semantic button within Bootstrap's Grid layout. Instead of bringing over all of bootstrap, you can simply import the grid module.
#import "semantic-ui";
/* Required */
#import "node_modules/bootstrap/scss/functions";
#import "node_modules/bootstrap/scss/variables";
#import "node_modules/bootstrap/scss/mixins";
.bs {
/* Part you actually need */
#import "node_modules/bootstrap/scss/grid";
}
This would reduce the footprint to only what you need, reduce your CSS size, and reduce overlap of styling for elements/classes you do not want to be overwritten.
I would not recommend assigning an id to your component and writing your overrides there. That will force you to use that id everywhere throughout your application, which you do not want to do.
You have two options:
1) The easiest option would be to build your own version of Bootstrap that ONLY contains the styles for components you are actually using in your app. This is also going reduce the number of styles your user has to download to render your app. Just exclude "Modal" from the build (and any other bootstrap components you do not use).
2) Do a class comparison between the two libraries you are using. This should actually be easy to do with developer tools in any browser. You will see each time the component you are targeting matches a class in one of your style sheets. Some rules will be crossed out in one, some will be crossed out in the other. If you want the styles for Semantic UI to take precedence, you will want to make a separate stylesheet that increases specificity for the style properties that are being lost from Semantic UI. My guess is there are probably only a few style properties that are getting overridden or that you do not want.
You can also put the above styles in the style prop on your modal if you do not want to create a separate file and they will be added inline to the component, effectively being more specific than the styles in either CSS file.
This worked for me.
In a custom css file, insert the following rule
.modal {
top: auto !important;
left: auto !important;
height: auto !important;
}
I just started with React and have a simple question I couldn't find anywhere.
So, should every React component have it's own stylesheet?
For example if I have my main App component which I render to the browser should I just include a css file there and have all my styles in that or is it bettet to have an own css file for every component?
Thanks.
CSS best practices in React are still heavily debated. There are pros and cons to each variation.
What you are probably looking for is modularity in your CSS. While having unique style sheets for your components does accomplish this to some degree I suggest taking a look at CSS modules. Packages like this can keep your CSS contained to a specific component so you don't over-write styles on other components.
Personally, I've done a little bit of both. I use a base style sheet (bootstrap for example). Then I use CSS-modules to help me make components that are unique that I might want to easily port over to other projects.
I've been loving checking out styled-components, but getting a bit stuck with the concept of extracting everything out into a component, and how to tweak styles for a particular use case. For example:
<Flex>
<MyStyledTitle>Hello I am a Title</MyStyledTitle>
<MyStyledBodyText>blah</MyStyledBodyText>
</Flex>
Let's say that I wanted to make the following customisations for this use case:
styled title grey (subdued text colour),
the body text to have a right margin of 100px (don't ask why).
The styled-components way, the first part could be done like:
<MyStyledTitle colorTint='subdued' />
or even
<MyStyledTitle>
<SubduedText>MyTitle</SubduedText>
</MyStyledTitle>
Perhaps using a prop for title that lets you configure it to use subdued text or ANOTHER hild component that defines the grey text..
But what about for the second option...
<MyStyledBodyText style={{paddingRight: 100}} />
Inline style? Use a Grid or layout component around it?
At which point does something become a specific styled-component and if not, then how does one customise smaller style changes?
While i really like this idea of removing the mapping between component + class name, I guess i'm feeling a bit torn between the classical idea of having a 'style sheet' file that can contain all the classes and modifier css, then using a presenter to choose between the combinations of css classes.
I might be missing something here, but just keen to see some bigger examples of styled components in practice. Any links / tips would be greatly appreciated!
We've been using styled-components in our project extensively. Few basic patterns/conventions we use are
Components created using StyledComponents are not used across React Components. Under extreme scenarios, we pull them into external files and export.
DIV is the most extensively used styled-component (styled.div). (Ofcourse we do use other html elements like button, table td etc., but styled explicitly).
Different styles for the same HTML element (or) React Component are declared explicitly as different styles. (If you refer to FAQ section of the styled-components docs, you might notice these - https://github.com/styled-components/styled-components/blob/master/docs/faq.md)
Overall to answer your question, we have moved away from the classical stylesheet and as well thinking about combining multiple styles. It has worked well, except that looking up on unit tests is a bit painful.
Thanks