Article summary
When building a new web application, there are quite a few decisions you have to make. Will it be rendered by a server and sent to the client, or will it be a feature-rich SPA? Which JavaScript framework should be used (if any)? React? Angular? Vue? Ember?
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
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
If you’re using a component-based JavaScript framework like React, you might be interested in a component library instead of a CSS framework. Every React application needs a base set of components to start from; these are then combined in different ways to create more powerful components. You can build the base components yourself, but why should you when there are existing component libraries that do it for you? Material UI and Ant Design are currently the most popular component libraries available.
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?