How to write better CSS!

[otc]

Ever since I started coding CSS I always had an issue with the way it was written: Rule Set after Rule Set. Even for few page websites the code can become quite long and you always have to go back and forth looking at your HTML to see what Rule does what or where it is in your stylesheet.

So I started coding my CSS with indentations, using the same indentation as my HTML. It made things easy and just by looking at the CSS I could determine what Rule Set did what and where it was in my DOM.

So I asked a few programmers to start working on projects using this method to see if just by reading their code I could understand their DOM and it worked. Of course this method is only good for development not production.

So I created a little JS program that converts your code instantly for you and named it STCSS – Style The Cascading Style Sheets. Still in Beta, but here it is.

It only works for globals, id’s and classes because these are the fastest rendering selectors.

Let me know what you guys think.

Thanks to all.

[magicspon]

Lovely stuff…

If you’re using an OOCSS approach it would be awesome to be able to see the connections between patterns, some kinda webgl crazyness, strings between the elements, like spaghetti. mmmm spaghetti

[otc]

Thanks, I’m actually working on adding codemirror to it so people can enjoy coding on the site easily.

I’ve already added a hidden section that generate the code. If you look at the code as you write you will see a section called generate. In there I’m rendering the html you are typing in the box.

The idea is by using Edge Inspect CC or similar programs that enable you to view your website in all browsers/devices, you would be developing live to all browsers/devices. I thought that would be kinda cool =D

[Author]

Posts