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.
1
-
please take your time to review the answers and choose a correct one.domokun– domokun2014-07-21 15:21:25 +00:00Commented Jul 21, 2014 at 15:21
Add a comment
|
2 Answers
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
7 Comments
domokun
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.
enguerranws
@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
@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.
domokun
@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.
enguerranws
Well, I agree with you. But he may not be a newbie, and really wants to load only relevant CSS on each partials.
|
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
