Where to place CSS in AngularJS partials?

Question

I know a good practice is to keep css code in a external .css file, instead on adding tags in the html code. But what about css code that is only valid for a single angular partial html?

Thanks for your advice.

please take your time to review the answers and choose a correct one. — domokun, Jul 21 '14 at 15:21

score 2 · Answer 1 · answered Jul 15 '14 at 12:29

2

As a best practice, CSS files must always be put in a dedicated [fileName].css.

If you want to have some CSS applied only to some part of the code (as it always is using CSS), you specify dedicated rules.

Very easy example (2 partials, 1 stylesheet)

first:

<div id="partial1">
  <h1>I'm the first</h1>
</div>

second:

<div id="partial2">
  <h1>I'm the second</h1>
</div>

stylesheet:

// Common rule to both the <h1>
h1 {
  font-size: 64px;
}

// only for partial1
#partial1 h1 {
  color: #C0C0C0;
}

//only for partial2
#partial2 h1 {
  color: #FF0000;
}

Edit:

You can also use SASS and have a different file for every partial (for example _partial1.scss and _partial2.scss), that gets included in your main.scss, something like this:

@import "partial1",
        "partial2";

See more about SASS here: http://sass-lang.com/guide

answered Jul 15 '14 at 12:29

domokun

3,013
3
29
55

`But what about css code that is only valid for a single angular partial html?` IDs and Classes are used for this, and this is how CSS are supposed to be used. You could also inline the CSS for that partial, but this would sucks. – domokun Jul 15 '14 at 12:35
@SW4 I gave him an advice to do what I think is the best, and then I gave him an answer to achieve what he asked for in an Angular way. – enguerranws Jul 15 '14 at 12:52
@domokun I totally agree with your solution, that's what I do every day. But I'm not sure this is what he asked for. He asks if there is a way to load only the relevant CSS for each Angular partials. Here you load everything, even if it won't be interpreted. – enguerranws Jul 15 '14 at 12:55
1

@enguerranws I feel I gave him the best response possible according to what are the actual best practices. Newbies often wants to do things that they thinks are right, and I was absolutely no different. But I think that if we really wants to help them (and this should be the whole point of Stack Overflow) we have a commitment in pointing out their errors and also show them the right direction. – domokun Jul 15 '14 at 13:18
Well, I agree with you. But he may not be a newbie, and really wants to load only relevant CSS on each partials. – enguerranws Jul 15 '14 at 13:27
Thanks for all the comments. (FYI, I'm no newbie). My question is practical: if the css code is not reused, why put it somewhere else? Of course I can have both mypartial1.html & mypartial1.css.... but is it necessary? For example, I can use – Jorgito Gutierrez Jul 15 '14 at 18:49
I don't get your point... I will have understood a lazy loading attempt, but this just doesn't make sense to me. Regardless of how many time you use that CSS, your browser will load it once, and then serve a cached copy whenever is needed. If you use and inline stylesheet, you will regret it the first time something is wrong with styling – domokun Jul 16 '14 at 07:43

score 1 · Answer 2 · edited Jul 16 '14 at 09:45

I highly recommend to put it on an external CSS file. If the styles that are only used for a single page are not too heavy, just put it with your main CSS file.

Remember that another file will make another request to the server.

If you still want to add another CSS file with Angular, you should do it with $rootScope :

$rootScope.$on('$routeChangeSuccess', function(ev,data) {   

  $rootScope.routeName = data.$$route.originalPath;

});

Then, in your layout file :

<link ng-if="routeName === 'myPartial' " href="css/myPartial.css" rel="stylesheet" type="text/css" />

Some docs about AngularJS rootScope : https://docs.angularjs.org/api/ng/service/$rootScope

Where to place CSS in AngularJS partials?

2 Answers2