Don’t write CSS selectors.
Generate clean CSS selector markup documents for your App based on HTML markup.
Add this link to your bookmarks toolbar and click it while on any html page. You will see the output in the console. From there on, copy and paste it in to a css file and use the dev tools to style your app.
# Clone
$ git clone https://github.com/visualex/css-generator
Write some markup:
<div class="parent a">
<div class="php">
<a><img/></a>
</div>
<div class="title"><h1>title</h1></div>
<div class="field">
<p>lorem ipsum</p>
</div>
</div>
Having jQuery and CssGenerator loaded in your scripts, you can get the following output by calling $('body').cssGenerator()
:
.parent.a{}
.parent.a .php{}
.parent.a .php a{}
.parent.a .php a img{}
.parent.a .title{}
.parent.a .title h1{}
.parent.a .title h1{}
.parent.a .field{}
.parent.a .field p{}