What is the best style approach and CSS framework for your project?
Introduction
In this article, we will Analyze the options and results of decisions choosing between a variety of libraries and frameworks available for styling HTML in various ways. The libraries and frameworks may be javascript component-based, libraries, javascript and CSS frameworks, utility classes, etc.
Choosing one of the libraries or frameworks requires a good understanding, familiarity, and insight into the project and business goals, vision, and mission, in order to align the project’s needs with the tools’ values.
In order to make the best decisions from current choices (such as libraries, frameworks, etc.) and future choices and solutions, developers need rules and formulas.
Some of the top CSS frameworks include :
- Tailwind CSS
- Bootstrap
- MUI
- Semantic UI
- Ant design
- UI kit
- PureCss
- Bulma
- Scss module
- Jss
- Styled component
- Linaria
Considering these factors can help you determine the most suitable framework for styling your project that aligns with your project’s needs and goals, such as Material UI for a Material Design-based project or Bootstrap and Tailwind for a more general-purpose solution.
- Type of users
- SEO considerations
- Performance requirements
- Readability and developer experience
- The availability of time to implement UI components.
Performance and SEO
If the highest priority is performance to be considered in decision-making understanding concepts below is important.
The high performance is good for SEO and crawlers to get a high rank.
There are two categories of styling libraries and frameworks
- build-time integration (css based)
- run-time integration (js based)
Javascript-based solutions like styled-component, JSS, and MUI are run-time integration.
Run-time solutions have a negative performance impact and decrease performance even if they are fast and lightweight because javascript should be executed and transpile to CSS to be applied to DOM and this process causes overhead for main-thread work.
By lazy loading, the negative impact can be improved much better to load scripts on-demand.
Packages like Linaria try to make the run-time solutions zero runtime by converting the js-based styles to CSS by executing the runtime js execution in build time.
Build-time integrations and solutions are much better choices because they are ready to apply to DOM and no longer have JavaScript execution needs.
CSS and Sass are build-time but because of the high priority of loading styles by browser defaults, it causes render-blocking, the only way to fix this issue is to use module.css or module.scss to load styles of on-demand components.
Post-CSS tricks to purge unused styles like tree shaking will have a great positive impact on performance.
Tailwind CSS is based on build-time integration and uses these tricks and solutions to purge and minify styles to reduce the final CSS size and is a great solution.
JS-based solutions are easy to use, implement, and change by JS functions outputs or js-based calculations and conditions thus they have better developer experience.
By ignoring the performance factor, there is a variety of frameworks and solutions that can be chosen based on project design and business needs.
have enough time to implement the design system
Based on the above concepts implementing UI components from scratch, atoms, and molecules with tailwind or CSS modules is the best solution because it can be as lightweight as possible based on project needs and the design system UI kit.
The project is a dashboard for special customers
In this case, component-based js frameworks like Ant design and MUI are better solutions by considering the design system based on project and business needs.
Conclusion
After reading this article, you should understand the core principles of design systems, styling methods, and frameworks to analyze and make the right decisions based on project needs.
By the way, if this article helped you, don’t forget to clap & subscribe! 🙂
thanks.
