I have a question about html and css automation. I frequently use Emmet to write HTML code quickly. Can I write my HTML in such a way that the CSS structure will auto-generate? For example, if I write the following code:
div.container>div.header>a.logo+h1{Hello World}
Emmet will generate this output:
<div class="container">
<div class="header">
<a href="" class="logo"></a>
<h1>Hello World</h1>
</div>
</div>
But what I really want is this result:
<div class="container">
<div class="header">
<a href="" class="logo"></a>
<h1>Hello World</h1>
</div>
</div>
<style>
.container {}
.container .header {}
.container .header a.logo {}
.container .header a:hover.logo {}
.container .header h1 {}
</style>
Do you know if it's possible to achieve this level of automation?