Importing styles in less/sass vs in js?

help
1

When we import styles right in less/sass files (using @import syntax), as a result we have styles compiled in a separate css file, whereas importing styles right in the js file puts them right in the plain form in the <head> tag of the app.

  1. Does is mean that whenever a component is destroyed, the inline style is removed from the page, or it appears when the component is created and stays there until page reload, right?

  2. The example in simple-todos imports the styles in a separates file in client/main.less. I find it more clean to store related styles next to a component, deep in the files hierarchy. Should I create a separate importing flow specifically for .less files? Like main.less < startup.less < layout.less < component.less or in this case it is better to load the .less files right in the js then?

2

3. And overall, are there any specific disadvantages of storing the styles in the <head> of the page vs in a separate compiled css files?

3

Overall, as I understand from here: http://stackoverflow.com/questions/929683/css-on-a-separate-file-or-not, it is rather a question of bandwidth of rebuilding css’s on the page… The question #1 is still valid then, does Meteor rebuild it’s initial styles imported within js file of the component, when the component is destroyed?

Other than this bandwidth load, I hardly see any advantages of importing styles in the .less/.sass, and would like to use .js in most cases.