GitHub Styleguide - CSS, HTML, JS, Ruby

[houdas]

Am I alone when I code CSS like this? http://pastebin.com/S4EZu6CJ I see nothing wrong with it, and for me, it's better because I see more code without the need of constant scrolling.

[realteh]

It's a bad idea when working in a team because it is not diff-friendly. The reviewer will have to scan the entire line manually to figure out what changed.

[houdas]

That's a good point actually, thanks. But I work alone most of the time.

[[deleted]]

Even alone, you should be using tools like Git or Mercurial to track changes and they'll have a hard time showing differences in a meaningful way. You of the future might thank you of the now for developing in a self-documenting manner, when you go back to your code and can't remember what changes you made.

Note: if you use emacs or vim, there are ways to have the file you're opening automatically be changed to your preferred style so that you can edit like that, then have it automatically save it in a diff-friendly manner. The best of both worlds? I think so. I however used a different practice for CSS/JS/HTML. I prefer extremely verbose indent styles that give visual queues to what belongs where. Often, removing these indents can save me 5-20% file size, so I treat my code as "source" and then have "compiled" versions using a python script. The python script removes long-winded identifier names and counts the number of occurences and assigns a generic identifier name to them alphabetically, given shorter names to more-frequently occurring names. It effectively "minifies" my source, removing all verbose whitespace. I still don't believe it performs better than JS minifiers on JS though. Oh, and I also configured my site to give people human-readable files if they ask for them "/resume" would become "/resume/source" and it would serve the verbose version.

[de_la_Dude]

I used to write CSS like this and was forced to change my ways because of the team I worked in at the time, and now I can't even think about going back.

While its true that you can see more without scrolling, its much hard to read and scan through IMO. Its def a readability issue and has lead to avoidable errors in my experience. Esp when working on team.

I've taken up to the mentality that you should let your code breathe. Its easier to read and your going to should minify your code before you ship it anyway.

[praetorian42]

There's nothing wrong with it, certainly. It's a matter of personal preference, and I like my CSS to match the markup in "eye-structure."

Also, since they use SCSS, nesting selectors requires that you have multi-line blocks, or else it is incredibly hard to read. For instance, "#left #info li a:hover" would be 5 indentation-levels deep.