3 Style Management Tips That Will Save You a Headache in Your Angular App CSS
Let’s face it — when we work on the front end, writing CSS is not the thing that excites us the most. We like to mess with the more serious stuff (you know what I mean — JavaScript). Most of the apps I’ve come across, and I am sure you have too, have a big mess in the stylesheet area. Issues like code duplication, overriding styles, lack of organization, etc. are rampant.
In this article, I’d like to share with you how I came up with a methodology that improves my styles, and therefore, my lifestyle 😇
Create a Core Component Library
In each application, there’s a uniform style which exists throughout it. It can be reflected in the styles of inputs, buttons, tabs, tooltips, etc. Therefore I recommend writing a core components library based on the application style guide. The benefits of such a library are having a single source of truth for component style and behavior, and faster development cycles, especially as the app grows bigger and more complex. For example:
Such a library can be built in two methods; in case the app is already large, and we have an extensive amount of components, it’s recommended to set up a dedicated team whose job is to construct it.
In case the app is small, we can do it in smaller, incremental steps, and let each developer build some core components as part of a feature they’re working on.
Use Utility Classes
Now that we have a library that provides us with all the components we need to build a new feature, we need to deal with the smaller things. For instance, styling element display using flexbox or grid, adding margins, padding, etc. To deal with this, I recommend using the utility classes approach — it’s both fast and DRY. In my projects, I’m using a library named Tailwind CSS:
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
Let’s add Tailwind to our project using another neat library from ngneat:
Thanks to Chau Tran for for creating this schematic.
As we can see, its sets up everything we need to get started. Now we can use it wherever we need to:
In development mode, we load the entire Tailwind library. But the cool thing is that in production mode, we activate PurgeCSS, which scans our project and only bundles the classes used in it.
Usually, I limit myself to five utility classes per single element, and to tell the truth — there were few cases where I’ve reached that number. Even if you do find yourself using many classes, you can use the apply functionality from Tailwind to move them to the stylesheet, and replace them with a single class in the template.
I highly recommend exploring Tailwind, as it has many capabilities. If you’re working with VSCode, you can use this great plugin for IntelliSense:
Or use this plugin to quickly access the docs:
In Webstorm you’ll also get autocompletion out of the box.
Use CSS Variables
I want to end with a small but important tip — use CSS variables. Use them to define your colors, sizes, and any other value that is used repeatedly in the app. They’re widely supported, can be changed during runtime, and can be scoped to an element.
For example, look at how easily you can create a dark mode for your application:
Now the only thing we need to do is toggle the dark-theme class.
🚀 In Case You Missed It
Here are a few of my open source projects:
- Akita: State Management Tailored-Made for JS Applications
- Spectator: A Powerful Tool to Simplify Your Angular Tests
- Transloco: The Internationalization library Angular
- error-tailer — Seamless form errors for Angular applications
- Forms Manager: The Foundation for Proper Form Management in Angular
- Cashew: A flexible and straightforward library that caches HTTP requests
- Error Tailor — Seamless form errors for Angular applications
And many more!
Follow me on Medium or Twitter to read more about Angular, Akita and JS!
