3

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 ?

Marox
  • 359
  • 9
  • 26

3 Answers3

4

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.

Community
  • 1
  • 1
Smit
  • 2,078
  • 2
  • 17
  • 40
  • What about separated files, just for easier project structure, and concat them to one minified, and load this one file on page ? – Marox Aug 11 '16 at 15:08
  • @Marox the problem with that is that your app will generate and `XHR` every time you load a component – Leo Javier Aug 11 '16 at 15:21
  • 1
    @Smit The link to the article in the answer is broken – Tevin Jan 09 '17 at 15:10
1

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.

nagrom97
  • 494
  • 1
  • 6
  • 23
  • So one, minified css loaded to browser seems to work faster ? – Marox Aug 11 '16 at 15:10
  • In my case yes, I was very careful however, like mentioned in one of your answers, it can get complicated if you do not keep an eye on classes, ID's and the like. It was odd really since I was expecting it to be slower but turned out faster , and of course , less complicated, less references and the like. – nagrom97 Aug 11 '16 at 15:12
0

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

Leo Javier
  • 1,383
  • 12
  • 19