Modern styling of web applications, CSS frameworks compared to component libraries

We have to make decisions when building a new web application. Is it rendered by the server and sent to the client, or is it a SPA with powerful features? Which framework should be used (if any)? React? Angular? Vue? Ember?

But the decision that is often overlooked is how to style the program and maintain these styles when creating the program. Modern tools like pre-built CSS frameworks and component libraries provide a great starting point, but which one is right for your project? CSS frameworks CSS frameworks (such as Bootstrap or Tailwind) provide a set of predefined CSS class names that you can use without special settings for common component styles, such as the layout of page elements, the appearance of inputs and buttons, and the behavior of modal windows. For static sites or web-rendered web applications, CSS frameworks offer many pre-built capabilities. Unfortunately, this is often the case when web applications are using the CSS framework. This may not be a problem for the admin dashboard or an internal tool. But if you build a program that deals with the customer, you probably want to be better known for the company-specific brand. Remember to work closely with your team designer to make sure the framework is aligned with your company's brand. Component libraries If you are using a component-based JavaScript framework such as React, you may be using a component library instead of the CSS framework. Every React program needs a basic set of components to get started; These are then combined in different ways to create very powerful components. You can build your own components. But why do this when there is a component library that does this for you? Material UI and Ant Design are currently the most popular libraries available. Component libraries suffer from the same problems as the CSS framework when creating a unique look and feel. They try to manage this by providing a way to personalize the "theme" of the program. Everything from color palettes and font sizes to button borders are usually available as a theme variable that can be configured. Ant Design, for example, shows many LESS variables to configure. Another advantage of component libraries is that they often contain all kinds of notifications for the components they provide. If you use typewriting, this can be extremely helpful in ensuring that the components are used correctly. We hope this article provides useful information for styling future web applications. Tell me, what styling tools do you use?