As a front-end developer, it is surprising how much time goes with styling CSS and is therefore definitely a place you should be efficient. This post will teach you how to find the ideal balance between global and component styling in an Angular app for maximum development speed and maintainability.

On one hand, global styling makes it easy to use a CSS class anywhere in the app without needing to import anything. On the other hand, this can become a pain to maintain when too much styling is global as you loose overview of where the global styling is used. Component styling makes the usage of style very explicit because it needs to be imported.

What style should be global?

To ask the question of which style should be global you should ask yourself:

What styling do I want to be easily accessible through CSS classes?

My recommendation is simply to use these as global styling:

1. The GRID system
2. Position helpers

Update

Note, that my recommended approach for the grid layout and position helpers is to use Tailwind CSS as that includes great global styles for this and more in a tree-shakable way (only CSS for the used classes will be generated).

The grid layout

The reason I write the grid layout is that there should only be one grid layout in the application or the system would be inconsistent and grid layout are likely to conflict. In the modern world of “mobile first” sounding everywhere, the app should be set for responsiveness from the start. I would recommend always designing the skeleton of your app through some kind of grid layout for a number of reasons:

It is easy and fast to set up the page skeleton

Using a grid layout it is easy and fast to set up the structure of a web page without writing any new CSS. Personally, I enjoy writing as little CSS as possible as it is tedious and is hard to maintain and instead use a grid layout to structure the application, where possible.

It creates a responsive skeleton for the application and makes you think mobile first

I would lie if I said that a grid layout magically makes the application 100 % mobile friendly in all scenarios. But it definitely makes it easier to create a responsive app when the skeleton of the app is already stacking correctly on different screen sizes. Of course, you would in most need to write CSS to get it completely perfect on all screen sizes.

All right I’m sold, using a grid layout may be a good idea. What can you recommend?

Glad you asked. When I’m choosing a framework I’m typically making the decision based on functionality and community. For this, I would recommend using the Bootstrap grid layout. You can also use Angular’s flex layout where you are applying the grid layout using directives.  This can be beneficial if you want to configure your grid layout using Typescript and eg. specify the responsive breakpoints using Typescript variables (note, this is still in beta). If you don’t need to control your grid through Typescript and aren’t comfortable with using a beta library, I would recommend using the Bootstrap grid layout. Even if you don’t want to use the complete Bootstrap library in your app, you can import only the grid layout.

Position helpers

Position helpers resonate completely with my philosophy about writing as little CSS as possible. Position helpers are global CSS that makes positioning of an element’s padding and margin easy. It’s like having shorts cuts for doing trivial position adjustments so you don’t need to write new CSS for all of that.

What would I recommend having global position helpers for?

1. Padding: I want to easily adjust padding. This includes position helpers for padding, padding-left, padding-right, padding-top, padding-bottom, padding-vertically and padding-horizontal. They follow the convention p*position*-*padding size*, eg. pr-5 would be padding-right 5 px.
2. Margin: Easy adjustment of margin. Like padding, but follow the convention m*position*-*margin size in px*, eg. mr-5 would be margin-right 5 px.

You can implement this by copying my position helpers from my Github.

What style should be in components

Having style encapsulated in Angular components has its beauty. It makes the side effect of CSS changes explicit and hence more maintainable. You have control over exactly where your CSS is applied without using nesting in your CSS selectors.

Because an application is maintained way longer than it is developed you should take maintenance seriously and have a good balance between maintenance and development optimization. Too much of each is not ideal and will either give you a too slow development or a too painful time maintaining the system.

Cool story, what should be in the component styling?

Well, it might sound obvious, but it is the styling that is actually specific to the component. That includes the adjustments you make after you have gone as far as possible with the grid and position helpers. In case you have some component styling that should be shared you should import these using SCSS mixins or inheritance, to avoid code duplication.

The three steps of designing a webpage

Know we know what style should be global style and what should be component style. This goes us an efficient three step process of designing web pages:

1. Set a responsive skeleton up using a grid layout (global style)
2. Apply position helpers in the HTML (global style)
3. Get the page pixel perfect using component style (component style)

Let’s look at how to apply this in practice.

Putting it all together in the development of a page

I have created a Git repository to demonstrate how to apply what I have just preached.

Having a look at how the global styles for the project are set up:

Because the app uses bootstrap we will import the whole bootstrap library, but you could just import the grid layout. The position-helpers, I talked about before, are getting imported here, to make them globally available. Note, when importing the complete Bootstrap library you also get a set of spacing helpers, that can do the same as the position-helpers, just with slightly different class names.

Now let’s consider styling this page without writing any new CSS:

Using Bootstrap grid layout and position-helpers, this is easily done with:

Note a couple of things:

1. mx-auto is a position helper from bootstrap to horizontal center by setting margin: 0 auto
2. The width of the todo-items wrapper is easily set to 10/12 using col-10
3. Spacing between the app-todo-item is easily created by setting margin-button to 3 with mb-3

Doing this we are able to design the page without writing any new CSS. In a real scenario, I would from here add the component style to make the page pixel perfect. You can find the complete code demo here.

Conclusion

We want through the pros and cons of global styling vs. component styling and discussed when to use what. When designing a page, the global styling should be applied first: setting the page skeleton up using a responsive grid layout, then applying the position helpers to minimize the amount of new CSS that needs to be written in order to create a responsive page skeleton as well as setting the spacing and positioning. After that, you should apply the component styling and get the component specifics pixel perfect. Following this approach will give you a nice balance between global and component styling and will optimize your development time as well as making your app’s styling more maintainable. This is just a general guideline, only you know if you need to make adjustments to make it more efficient for you.

Let me know if you have any feedback. Remember to share, comment and follow me on Twitter.