CODEWITHSUNDEEP
cssperformanceangular
Marox
Marox

Reputation: 359

Angular 2 - one big css file or one file per component

In Angular 2 we have several choices to make styles for our application. I'm trying to deduce if it is better to make a one big minified .css file, using some task runner (ex. Gulp) or to use Angular 2 styleUrls: ['myfile.css'] for every component. In which way, the performance in a browser will be better ? Let's say we have about 100 components, so we have to load 100 css files to our browser, or one, bigger, minified css file in the section for example.

What do you think ?

Upvotes: 3

Views: 1917

Answers (3)

Smit
Smit

Reputation: 2138

I would personally feel the doing separated files would work like a charm.

PROS:

  1. Well structured code
  2. Separated css files
  3. Takes little time to load

CONS:

  1. Need to look at too many CSS while making small changes.
  2. Makes debugging harder(if severe bug)
  3. Lot of files will be cached.

For HUGE one file.

PROS:

  1. One file to all.
  2. Easy to maintain.

CONS:

  1. Too complicated.
  2. Doesnot know what class or id belongs to what segment of code(if not named correctly)
  3. HUGE code, might just make the things worse.
  4. Takes too much of time to LOAD.

Everyone has their own perspective. You would like to read this article.

Upvotes: 4

Leo Javier
Leo Javier

Reputation: 1403

Step1

Yo need to determine how much the whole CSS file weights, after minified and G-zip Compressed... If is just a few kbs you should consider concatenating all your styles into one single file... remember you can always cache that file into the client's machine so it doesn't need to download the file every time the user loads the page...

Step2

If worth it... you should Isolate CSS rules for specific components... rules that you are not going to reuse in any other component.

Once you do this you will have two options:

If your component needs too many CSS rules... I would say more than 50 lines, it will become hard to maintain, since you wouldn't get IntelliSense from your IDE or any auto-indentation feature... so you may consider using: styleUrls: ['myfile.css'] and have these properties in its own file, easier to maintain and if you are using a CSS preprocessor to generate your CSS files... this will be a better approach.

Note that every time you load this component for the first time in your SPA your app will Request that CSS file from your server HTTP-REQUEST.

However, if your component only requires a few lines for styling you may want to use styles: ['h1{color:red}'] inline... this would load faster, since it prevent the app to make another HTTP request to your server to get the styles

Upvotes: 0

nagrom97
nagrom97

Reputation: 514

I personally (for my project at work) used a large minified file rather than lots of smaller ones, I did try both , over different components of the app and discovered that one minified , central file did the trick for me.

Upvotes: 1

Related Questions