Feature request: create corresponding CSS rule for html code

[GoogleCodeExporter]

Provide an option/switch that automatically create corresponding CSS code for a 
tag, or group of tags.

For example let us say that 'option/switch is '[+css]'. 

With the following code: 
div#wrapper[+css]>(div#header+div#body+div#footer)[+css]+p.comment[+css] 

Not only will this create the HTML tags, but also the corresponding CSS tags 
(this is probably easiest inside a stylesheet inside the HEAD tag for that 
document).

So this then becomes:

<style type="text/css">

#wrapper {

}

    #header {

    }

    #body {

    }

    #footer {

    }

p.comment {

}

</style>

<div id="wrapper">
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
    <p class="comment"></p>
</div>

The big advantage here is that you can create your code AND the corresponding 
style rules at the same time.

Original issue reported on code.google.com by wouter....@gmail.com on 7 Jan 2011 at 9:34

• Merged into: #209

[GoogleCodeExporter]

The behaviour of such feature is too unclear:
1. Do you need `p.comment` or just `.comment` selector?
2. When writing abbreviation like `div#main-section.content` which selector 
user expects in CSS: `#main-section.content` or `#main-section` and `.content`?
3. When writing abbreviation like `div.user-comments>p.comment` which selector 
user expects in CSS: `.user-comments > .comment` or `.user-comments .comment` 
or `.user-comments` and `.comment`?

... and so on

PS: if you want to produce a `div` tag with id/class attribute, you don't need 
to write it in abbreviation, e. g. `#wrapper` is the same as `div#wrapper`

Original comment by serge....@gmail.com on 7 Jan 2011 at 1:25

[GoogleCodeExporter]

Yes, I admit it is ambiguous, but perhaps it can be made clearer. For example:

1. How about wrapping it inside of curly brackets then. For example:
div{#wrapper}>(div{#header}+div{#body}+div{#footer})+{p.comment}

This would output #wrapper, #header, #body, #footer and also p.comment

2. div#main-section.content

In your first example, write it as div{#main-section.content}, so this becomes 
#main-section.content 
In your second example, write it as div{#main-section}{.content}, so this 
becomes `#main-section` and `.content`

3. I don't immediately have an answer to that one. 

And, thanks for your prompt reply.

Original comment by wouter....@gmail.com on 7 Jan 2011 at 1:53

[GoogleCodeExporter]

Curly braces are already reserved for text nodes (new in v0.7).

Changing syntax is really a bad for such feature with unclear behaviour. You 
won't gain more speed because you have to think differently before writing 
abbreviation (and thinking takes even more time than typing).

You will be much faster when you write *exctly* those CSS that you want and 
where you want, rather that thinking differently about abbreviation, 
double-checking output result (HTML and CSS) and cleaning up unnecessary 
selectors because they are defined somewhere else (i.e. in external 
stylesheet). Especially if you have editor with code complete.

Original comment by serge....@gmail.com on 7 Jan 2011 at 2:34

[GoogleCodeExporter]

Original comment by serge....@gmail.com on 24 Jan 2011 at 11:50

• Changed state: Duplicate