Combine code, template and styles or no (inspired by Angular Single File Component – Hackages)

Today I read interesting blog-post:


Angular Single File Component – Hackages Blog

Angular Single File Component – Hackages Blog

When working with Angular and Angular CLI, you end up quickly with a lot of folders & files as the application grows. The default behaviour of CLI generates a folder with at least the class, CSS…

Source: blog.hackages.io/angular-single-file-component-4a9eed8c80d5

As a short resume of blog-post, they show some tips for reducing files count in the angular-cli based projects. For example, by include template into the component instead of keeping it in a separate file.

But. In my opinion, it only applicable when you split your application into very, very small components. That they may be fit in one screen.

I notice, that most of the development time was spent to read a code.

As for me, It is comfortable and easy, when I can open template and component in separate windows.

On one window I’ll see a structure of the view. On another window, I’ll see a component logic at the same time.

Especially when using more than one monitor.

And no inline styles. In most cases styles created once and no need to look at them every time when need to work with component.

Also, in some project, we have general CSS for the whole application. And therefore for most components of those projects no need to have own style. Yes, we use SASS and separate scss/sass files and after that use Webpack for bundle styles in one. But from a component side – there is no one style file bind to them.

It is very easy to follow the Angular-cli component placement and naming convention. So after some period of self-discipline, you can easy find component files without heavy thinking.

And it is more comfortable if your IDE/code editor will help you to navigate between latest edited files, allows quickly open different types of files, have a reach keyboard shortcuts customization.

Leave a Reply

Your email address will not be published. Required fields are marked *