But one decision that’s often overlooked is how to style the application and maintain those styles as the application is built. Modern tools like pre-built CSS frameworks and component libraries offer a great starting point, but which one is the right fit for your project?
CSS frameworks (like Bootstrap or Tailwind) provide a series of predefined CSS class names that you can use out of the box for common style components, such as the layout of elements on the page, the look/feel of inputs and buttons, and the behavior of modal windows. For static sites or server-rendered web applications, CSS frameworks offer a lot of pre-built functionality.
Unfortunately, it’s often incredibly obvious when a web application is using a CSS framework. For an administrative dashboard or an internal tool, this might not be an issue. But if you’re making a consumer-facing application, you probably want it to identify more with a specific company brand. Remember to work closely with your team’s designer to make sure your usage of the framework aligns with your company’s brand.
Component libraries suffer from the same issues as CSS frameworks when it comes to creating a “unique” look and feel. They try to manage this by providing a way to customize the “theme” of the application. Everything from color palettes and font sizes to the border radius of buttons is typically available as a theme variable that can be configured. For example, Ant Design exposes many LESS (another CSS preprocessor) variables for configuration.
Another benefit of component libraries is that they often contain type declarations for the components they provide. If you’re using Typescript, this can be incredibly helpful to ensure that you’re using the components correctly.
I hope this post gave you some useful information for styling your next web application. I would love hear what styling tools you use?