Using the <style> tag itself has never been a problem. At least in the Browser's point of view.
The recommendation to avoid its use is basically based on Separation of Concerns, which makes code parts more reusable and future changes easier, faster and least likely to break existing features. So people started to organize the code based on this, since it was better for maintenance.
If you check Separation of Concerns on Wikipedia, you will see that it says: "A program that embodies SoC well is called a modular program.". Then you think:
"Hey, I'm writing an Angular 2 app! This thing is component based, So it is modular and has Separation of Concerns." Yeap! That's true! So, basically that problem solved by avoiding using the <style> tag is already addressed.
"Ok, but why this thing is not keeping my separation of concerns?" Well, it is not important to keep it, since it is for code maintenance and you don't maintain a 'compiled' code. But one thing that 'compiled' code should do is to perform well. And that's probably one of the reasons that the code is being added to the <style> tag.
"What? So you're saying that having the styles in the <style> tag of the HTML will perform better? Wouldn't it make a bigger file to be loaded first?" Basically, it seems that sometimes it will perform better, since the heavier document might load faster than a lighter one plus another http request.
In the way web technologies evolved recently, performance has become an important issue. There is a lot of discussions and suggestions about this and I recommend reading more about it. The future of loading CSS can be a good start.
Each case might have its specific needs and you should know how things work so you can decide what's the best approach to be used. You can check All the Ways to Add CSS to Angular 2 Components for a deeper explanation on this too.
Cheers!
I used 'compile' for an easier explanation, even though your source code won't be actually compiled, but transpiled, minified, compressed etc.
Using the <style> tag itself has never been a problem. At least in the Browser's point of view.
The recommendation to avoid its use is basically based on Separation of Concerns, which makes code parts more reusable and future changes easier, faster and least likely to break existing features. So people started to organize the code based on this, since it was better for maintenance.
If you check Separation of Concerns on Wikipedia, you will see that it says: "A program that embodies SoC well is called a modular program.". Then you think:
"Hey, I'm writing an Angular 2 app! This thing is component based, So it is modular and has Separation of Concerns." Yeap! That's true! So, basically that problem solved by avoiding using the <style> tag is already addressed.
"Ok, but why this thing is not keeping my separation of concerns?" Well, it is not important to keep it, since it is for code maintenance and you don't maintain a 'compiled' code. But one thing that 'compiled' code should do is to perform well. And that's probably one of the reasons that the code is being added to the <style> tag.
"What? So you're saying that having the styles in the <style> tag of the HTML will perform better? Wouldn't it make a bigger file to be loaded first?" Basically, it seems that sometimes it will perform better, since the heavier document might load faster than a lighter one plus another http request.
In the way web technologies evolved recently, performance has become an important issue. There is a lot of discussions and suggestions about this and I recommend reading more about it. The future of loading CSS can be a good start.
Each case might have its specific needs and you should know how things work so you can decide what's the best approach to be used. You can check All the Ways to Add CSS to Angular 2 Components for a deeper explanation on this too.
Cheers!