Proposal for one CSS file based hi-speed coding

[GoogleCodeExporter]

Lets say I used a zen-coding syntax

div#page>div#page-container>div#util-links+div#frame+div#footer

this generates me the required HTML. I do have to still write CSS 
selectors/classes required for all the generated tags.  It would be helpful if 
I paste the same string in CSS file and I get the output of all selectors with 
empty property sets like:

div#page
{ }
div#page div#page-container
{ }
div#page div#page-container div#util-links
{ }
div#page div#page-container div#frame
{ }
div#page div#page-container div#footer
{ }

How does this sound?? :)

Original issue reported on code.google.com by kish...@gmail.com on 1 Oct 2010 at 5:35

[GoogleCodeExporter]

I like your thoughts here @kishu27

... but, I would make one change to the proposal...

div#page {}
    div#page-container {}
        div#util-links {}
        div#frame {}
        div#footer {}

that way we aren't totally bogging down our css with a million extra characters 
and also making it a bit easier on the browser, come load time :D

Original comment by olson.l...@gmail.com on 6 Dec 2010 at 10:03

[GoogleCodeExporter]

I guess this feature will make sense on something like Eclipse. Not every 
editor/platform provide easy access to clipboard. And I think this feature 
should not depend on Expand Abbreviation action: you can place your caret on 
any element and this feature should match the complete tag, find all inner 
elements and provide a special window where user can choose how CSS selectors 
whould be genrated. Something like 'include tag names', 'use IDs', 'use 
CLASSes', 'use nesting' and so on

Original comment by serge....@gmail.com on 7 Dec 2010 at 9:06

[GoogleCodeExporter]

thanks for the reply @olson.levi

your change makes sense, but lets consider a situation:

div#page>div.callout-column-type>div.column.column-one+div.column.column-two
this produces a column style in which left column (one) is wider and two is 
narrow

same site uses another layout in which both columns are equal in width (or lets 
say any change in the width/layout), resulting: 

div#page>div.dual-column-type>div.column.column-one+div.column.column-two

In real practical world, people do use such techniques in website development.  
Your change will fail this situation.

Lets say we leave it to the developer for removing the obsolete selctors and 
empty style sets, then it should be enough improvement for productivity.

Please share your thoughts regarding this.  Thanks dude :)

--------------------------------------------------------------------------------
----

Hey @serge.che, thanks for looking here mate.

By your comment, I understood that you are saying that not all editors allow 
zen-coding to play around with clipboard easily.  My case here is that user 
pastes the string themselves (which then should be a normal text within the 
editor for zen-coding) and then presses command + , or ctrl + ,

You have provided a brilliant idea with not using it on Expand Abbreviation but 
with caret placing on any element.  However, if there's no easy access to 
clipboard then editors like dreamweaver will suffer, right?

Thanks guys.

Original comment by kish...@gmail.com on 7 Dec 2010 at 9:37

[GoogleCodeExporter]

Oh, got it. That makes sense. I guess it can be implemented as a custom filter 
with some options, something like this:

div#page>div#page-container|css:t:d

E.g. "use 'css' filter with 't' (ouput tags) and 'd' (deep selectors) options"

Original comment by serge....@gmail.com on 7 Dec 2010 at 10:19

[GoogleCodeExporter]

yes.  But the way you show it with custom filters hint me that at the same 
place in editor you want to expand it to tags and selectors(or deep selectors) 
both.  What I (or maybe other guys) would want it to type or paste 
"div#page>div#page-container" in separately html and css document editors and 
expand it to appropriate tags and selector for each document.  probably this 
way the change would be less complex for zen-coding and also be simple for 
developers to grasp it.

lets say by your way I expand it with t and d options and it will expand to 
both css selectors and html tags at the same place and I would have to copy and 
paste the css selectors out to other document (if i understood it correct)

I hope you get what I mean.

thanks for looking

Original comment by kish...@gmail.com on 7 Dec 2010 at 4:05

[GoogleCodeExporter]

Issue 235 has been merged into this issue.

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

[GoogleCodeExporter]

Issue 207 has been merged into this issue.

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