Comments on: Making Your Code As Beautiful As The Design Itself

By: Evolution of the web, VIM cheat sheet, KendoUI, Where is the fold?, Beautiful Code, Ugly JS | Serene Global

Fri, 30 Sep 2011 08:25:51 +0000

[...] your code as beautiful as the design [...]

By: Josh Humble

Josh Humble — Fri, 16 Sep 2011 18:23:37 +0000

I would emphasize the file size part, too, especially when dealing with large stylesheets. After all, a compressed stylesheet is stripped of ALL white-space, so placing rules on one line definitely helps. But then, the author’s preference with one coding style or the other, is where it really counts in ease of use.

By: Josh Humble

Josh Humble — Thu, 15 Sep 2011 21:34:26 +0000

Interesting technique (tabbing your css, the same you do with html). I did that for a while, but switched back to non-tabbed lines, due to its unorthodoxy and working with other devs. Still kind of like it, though.

By: Jake Smith

Jake Smith — Thu, 15 Sep 2011 20:54:27 +0000

I personally can’t stand single line. What if I’m viewing the CSS in firebug and I need to update a property….property is on line X….but so is about 10 other properties.

I prefer to use multi-line with the following rules:
1. CSS rule can be single line if it has only 1 property.
2. All properties are in alphabetical order.
2a. If position is defined, I will tab out the top/right/bottom/left (in that order).
3. I have a giant comment block at the top to keep track of z-index, when added to elements.
4. I also use LESS….and it’s awesome!
5. I minify my CSS in production, so saving whitespace isn’t an issue.

By: The Best Development Articles Of AmberWeinberg.com :: Freelance XHTML, CSS and WordPress Developer Amber Weinberg :: Nashville, TN

Tue, 13 Jul 2010 14:31:31 +0000

[...] Making Your Code As Beautiful As The Design Itself How to organize your code to be clean, easy to read and easy for other developers jump in! [...]

By: Jason

Jason — Mon, 05 Apr 2010 19:03:00 +0000

I mostly use one-line CSS. But when there are a lot of declarations, I will do a hybrid of sorts.

I’ll put the ‘static’ stuff like image url, etc., onto the first line, then put the more ‘dynamic’ stuff on a second line or individual lines. This would include possibly color, definitely positioning/padding/border, and anything else I’d need to modify during the final phase of tweaking.