How to migrate to Stylify CSS from other CSS frameworks and libraries
Choose your migration guide
If you haven't found a tool from which you want to migrate to Stylify, let us know!
Integrating Stylify in existing project
If you are about to integrate the Stylify CSS into an existing project you should start by rewriting small pieces of your application to minimize the integration errors and carefully remove all unused rewritten pieces of CSS.
Stylify can also generate CSS for each bundle separately so you can create small chunks of CSS and load them only when needed.
The recommended steps you should follow are the following:
- Pick a small (or non critical) piece of your application.
- Create a bundle for that piece of application using @stylify/bundler.
- Rewrite the CSS of that selected part.
- Import the bundle CSS and remove the unused rewritten CSS.
- If all the previous steps are done, mangle selectors during a production build and repeat the process until everything is rewritten.
Solving Selectors Collisions
If there is a colision with the Stylify selectors, you can configure selectors prefix and in case you enable the mangling and there is a collision, then add you must add the mangled selectors prefix.
Solving CSS Specificity problems
In case Stylify utilities are overriden by your css, you need to increase Stylify CSS utilities specificity.
Whther you are using @stylify/unplugin or @stylify/bundler directly, you can configure css layers. This way, you can wrap your existing CSS into the layer, that has lower specificity than the CSS generated by Stylify CSS and the issue with overriden utilities will be solved.
Integrate Stylify into your favorite tool
Stylify can be used in various tools. Pick your favorite tool and start using Stylify CSS in a minute.
- 🚀 Learn how to get started
- ⚙️ Or configure Stylify right away:
Speed up development with prepared Headless CSS Components
Copy&Paste, unstyled components inspired by the Material Design V3.