Making Your Code as Beautiful as the Design Itself

Free Updates via Email, Facebook, or Twitter!

Making Your Code as Beautiful as the Design Itself

Posted March 2, 2010 in Productivity, Programming

A website’s design gets all the glory. When someone visits a site, you’ll hear them talk about how awesome the design is–but, do you ever hear someone talk about how awesome the code is? Never!

Regular people can’t see code, nor do they care to see it or what it looks like. It’s precisely this reason that there’s so much ugly code in the web world today. People don’t see it so developers don’t believe that clean code is important, but it is.

It’s quite rare to find a clean coded site, even from huge companies who should have the budget to pay for a good developer. However, it’s just as important to have beautiful code as it is to have a beautiful design.

Why Should It Matter?

Most of the time, messy code works just as well as clean code. So why should it matter if it’s pretty or not?

Quicker to update–Organized code is easy to navigate and update. Save yourself some time in the future by making stuff easier to find now.
Faster loads–Often, clean coding uses less code, which means it’s faster to load.
Professionally–Would you rather pay someone who gives you a junk heap of code you can’t read, or someone who hands you correctly nested and organized code? Which one would make your life easier? Which one shows more professionalism?
Find errors–With organized code, there’s less of a chance you forgot to close a tag or that you closed them in the wrong order. Plus, if you do make a mistake, it’s a lot quicker to find it.

Beautify Your CSS

There are several ways that I’ll show you how to organize your CSS. Of course, beauty is in the eye of the beholder, so you may not find that what works for me, works for you. Experiment with a few different ways you can organize your code to find what works for you.

All in one line–Placing the entire rule on one line shortens the document, making it a smaller file size, easier to read and quicker to locate what you need. For example, instead of:
- div { background: #FFF; font-style: italic; font-size: 18px; margin: 20px; padding: 10px; font-weight: bold; }
Try doing this instead:
- div { background: #FFF; font-style: italic; font-size: 18px; margin: 20px; }
Group like elements–I like to group similar rules together so that I can find everything I’m looking for in one section. For example:
- div.element {} div.element a {} div.element ul {} div.element .class p {}
  
  div.other {} div.other a {} div.other p.class {}
Sectioning–It’s also good to section off your CSS by the area of the website where it is located. I use comments to call attention to the sections and usually section them off by header, nav, footer, main page and subpages.
Semantics–Semantics are all about giving your items proper names. Name your classes and IDs with pertinent names, such as “header”, “nav”, or “bkg.jpg”. This allows anyone who needs to make updates to the site to find what they’re looking for quickly.
Shorthand–Shorten your background, font, padding, margin and border properties by using shorthands. Instead of using a single property for each, combine them into one. Instead of:
- div { padding-left: 20px; padding-right: 30px; padding-top: 50px; padding-bottom: 10px; }
do this:
- div { padding: 50px 30px 10px 20px; }

One CSS organization “tip” I personally hate is tabbing your rules into a hierarchy. In my opinion, this wastes space and makes it harder to read, but you can try that out and see if it works for you.

Organizing Your HTML

Organizing HTML is pretty quick and easy. Here are a few tips.

Tabbing–It’s important to properly tab your HTML code, otherwise it becomes almost impossible to read or find that one missing closed div. Convention says to tab once for each nested div, or div inside of a div.
Space sparing–It’s good to put some blank lines in between sections of your code, but too many can be counterproductive. I tend to space out separate main divs.
Semantics–Like your CSS class and ID names, everything should be named properly, including images and video. This can save you loads of time in the future. Your main background image should be name bkg.jpg (or something similar), not image2345.jpg.

Do I Hafta??

Of course, you don’t have to organize your code or make it look good. After all, no one is really going to look at it, right?

Wrong. If you’re planning on coding for a living, lots of people are going to look at your code. In fact, you may be losing business without even knowing it! A lot of potential clients will pass on a coder if their portfolio and own site are filled with nasty code.

Share Your Tips!

What are some of your tips for great looking code?

About the author: Amber is a freelancer with over 10 years of experience and specializes in clean, semantic and valid HTML5, CSS3 and Wordpress development. She also writes a web development blog at www.amberweinberg.com and just launched a web app for developers at www.codesnipp.it.

← Previous Post Random PostNext Post →

The Unlimited Freelancer is Now Only $19

Unleash the true potential of your business. Get The Unlimited Freelancer and start transforming your freelance business,
now only $19.

93 Comments

Gabriel Pillet
March 2nd, 2010 at 8:37 am

Nope, I don’t think putting CSS in one line per class makes it “beautiful”, well might be a matter of taste, but anyway it does not make it easy to update.

Try to imagine the same concept for PHP for example, that’s just not right :)

But all other rules described in the post are great, and should be taken into account, except the first one if I may.

Personally I like to design CSS (as well as JS) so that it’s easier to update. Then for performance purpose I minify and concatenate them.
Maximilian Bartel
March 2nd, 2010 at 9:31 am

Great article — I usually write my code as clean, short and sweet as I can.

However, after validation I recently tend to use the following free web service to order and format it perfectly. It ensures a certain kind of consistency through all of the CSS files I write and I think it’s quite useful, especially if I have to work on other peoples CSS files: http://styleneat.com
Bob Page
March 2nd, 2010 at 10:02 am

I use Notepad++ exclusively for writing HTML and CSS. It has all of the tools and features needed in a good programming text editor, along with syntax highlighting for dozens of languages, the ability to write custom macros for automating common tasks (i.e. commenting out code lines), and – the most useful aspect – highlighting of code pairs, including parentheses, brackets, and DIV’s. This feature alone has saved me hours of debugging by quickly finding broken code. Being open source, the price is right for a starving freelancer.
Chad
March 2nd, 2010 at 10:07 am

I recommend sticking with the multi-line approach for CSS, but tab in the attributes:

div {
background: #FFF;
font-style: italic;
font-size: 18px;
margin: 20px;
padding: 10px;
font-weight: bold;
}

This approach makes it much easier to find if you have “padding” already assigned, where with the single line approach you have to skim through a single line of text. Also by tabbing in the attributes the element name sticks out when browsing through the document, the same goal the single line approach achieved.

If you are concerned about performance, keep this spaced out version as your development copy, then for production run it through a CSS compressor (http://www.cssdrive.com/index.php/main/csscompressor/)
Chad
March 2nd, 2010 at 10:08 am

Whoops looks like you cannot have multiple spaces in comments! Here is what the example I posted was supposed to look like (minus the periods)

div {
…..background: #FFF;
…..font-style: italic;
…..font-size: 18px;
…..margin: 20px;
…..padding: 10px;
…..font-weight: bold;
}
Topher
March 2nd, 2010 at 10:09 am

I like to comment my HTML with a server side scripting language. I use PHP a lot, so I do things like this:

That example looks simplistic, but comments can be really handy, and using a server side language to do it makes it so that the comments don’t get sent down the pipe to the end user.

I also really don’t prefer single line CSS statements, they’re a huge pain to deal with later.
Topher
March 2nd, 2010 at 10:13 am

Nice, my example didn’t come through. Here it is chopped up a little:
?php // my comment here ?
div id=”whatever”
Jordan Walker
March 2nd, 2010 at 10:14 am

This article plays an important role and touches an some key points for programmers and designers alike. One thing I really like to do with CSS is to arrange the element rules in alphabetical order. Then as a good rule of thumb, on production, use a compressor to remove all unneeded space to decrease file size and increase site performance.

Anyway, just my 2 ¢s;

Thanks for the write up!
Michael Wilson
March 2nd, 2010 at 10:20 am

I couldn’t agree more with your idea to write your CSS all on one line.

It’s a total arse trying to find specific styles when everything is on one line and I don’t agree that it looks nicer.

I like to write my CSS like Chad mentioned above, however i go one step further and arrange my attributes in alphbetical order so:

display:inline; would come before float:left; and those would come before width:500px;

I do agree that code should be well organized though.
Alan
March 2nd, 2010 at 10:31 am

Agree with Michael and Chad, when it comes to it, you have a huge amount of CSS for any site, so putting in a straight line doesn’t really make it any easier, your probably still going to use a ‘find’ function.

Viewing the CSS in the one line is hard to read, and takes longer to work and edit.
Brian
March 2nd, 2010 at 10:42 am

“It’s quite rare to find a clean coded site, even from huge companies who should have the budget to pay for a good developer. However, it’s just as important to have beautiful code as it is to have a beautiful design.”

You need to be careful in how you are evaluating whether a site’s code is clean. It’s impossible to tell just by looking at a browser “view source” since most of that code is not handwritten but being generated and/or pulled in from 100 different places, and possibly optimized/compressed. On the developers side, it may be completely clean and logical.

Personally, I don’t feel we have any obligation to make sure the output is clean and readable as long as the development source is.
Travis
March 2nd, 2010 at 10:44 am

This is a really great read! I can totally relate to trying to find errors in dirty code, it’s no fun at all :(
Jami Gibbs
March 2nd, 2010 at 10:49 am

I think one line CSS is a nightmare to read. Especially when the line doesn’t wrap and I have to scroll right to read it. I much prefer listing vertically BUT (and here’s the key) indenting the child elements below the parent. I’ve found this so much easier to digest.
Amber Weinberg
March 2nd, 2010 at 11:39 am

@Gabriel I don’t think putting PHP all on one line works, but IMO it’s easier to read in CSS

@Michael I think it comes down to personal preference. I think it’s cleaner and easier to find, and I struggle to read other developer’s multi-line CSS

@Brian That’s not true. It’s easy to tell what site has optimized their code and what site just has crappy code. Optimized CSS will appear all in one run-on line with no spacing at all, like the jQuery library. Crappy code will just look…..messy and all over the place.

@jami I’m not a fan at all of indenting child elements. It makes it super hard to read….the theme I use for my site does that and it’s a pain to find what I’m looking for, I have to revert to using the search tool.

I think if you’re the one who’s coded the site, which ever way you do it will be quicker for you. One line CSS arranged by section of the site makes it super quick for me to find anything – multi-line CSS just gets frustrating, as I have to scroll and scroll and scroll forever to find something (and one line CSS often has no or little scroll).
Ove
March 2nd, 2010 at 11:52 am

I know you said beauty is in the eye of the beholder, but..

“Placing the entire rule on one line shortens the document, making it a smaller file size, easier to read and quicker to locate what you need. ”

I doubt you’ll find many professionals that would agree that a one line CSS rule is easier to read over one that is set up normally.

If you intend to have anyone else ever edit the stylesheet you’re making, it’s recommended that you still set it up so the next developer can easily find each property in the CSS rule.
Amber Weinberg
March 2nd, 2010 at 12:00 pm

@Ove not true, most of the other professional developer I know also prefer the one liner, as well as some of the top WP themers on Themeforest and elegantthemes. It’s a pretty common practice, I’ve even seen it in books.
Jami Gibbs
March 2nd, 2010 at 12:15 pm

There is no right or wrong answer here. It’s a matter of preference for the coder. It’s like arguing Mac vs PC. There’s gonna be die-hard’s on both sides of the argument and in the end, they accomplish the same darn thing.
claudia snell
March 2nd, 2010 at 12:19 pm

Great article!

Another benefit to coding well is that search engines love it. Check out this book/site: Building Findable Websites: http://buildingfindablewebsites.com/ (no, I have nothing to do with the book other than to find it very helpful). This is a particularly good point to make if you work on a team and need to convince non-technical members that it IS important to work toward cleaner code. Sometimes there is a push back when trying to change the way things are done.
Daniel
March 2nd, 2010 at 12:24 pm

I personally prefer one lines to multi-lines, and having a good structure (that’s consistent in the css file) in the very order like:

display, float, clear, width, height, margin, padding, color, background, border, then the fun stuff like -moz-border-radius or text-shadow, etc goes last and when necessary.

Perhaps I’m using a wide LCD monitor which definitely helps when viewing one lines styled codes. :)
Selene M. Bowlby
March 2nd, 2010 at 12:34 pm

Funny to see the comments on the one-line vs multi-line CSS rules – it appears to be a touchy subject. :)

I personally can’t stand seeing it in one line. I just find it crammed together and difficult to “see” what I’m looking for. If I’m working with someone else’s code, I will often put it in multi-lines just so I can manage it easier. I set mine up just like Chad.

Otherwise, I agree with all of your other points though! :)
Amberly | Web Designer
March 2nd, 2010 at 1:18 pm

Nice Article indeed. Its was fun to read.

@Selene. I agree with you. Its is easier to manage contents in multi-lines, but the code is neat when we do the same in single line.
Hinano
March 2nd, 2010 at 1:32 pm

I’m with you with writing CSS on a single line. It’s easier for me to locate the identifier. I’m not so concerned with organizing the attributes (shorthand withstanding) since I don’t troubleshoot CSS in the CSS. I troubleshoot CSS with Firebug then find the identifier and then make the edits.

I’m with you on pretty much every other point.

Regarding IDs and CLASSes, the rule I try to follow is to use IDs only when something has a name that is a Proper Noun, everything else gets a CLASS. IDs are easier to identify with JS so I can understand why some would not like this rule but Jquery levels that playing field. Using this rule helps me group elements as you mention above. This isn’t a hard and fast rule I always apply. Thoughts?

Thanks for the article.
Dan Denney
March 2nd, 2010 at 2:26 pm

Great post and awesome conversation in the comments!

I have been obsessing over clean code in my last 20 sites or so, trying multiple commenting approaches in html and following multi-line css. My latest efforts have been in clean jQuery as well.

It feels soooo much better and is definitely worth the extra time. Anyone picking up work on your items will appreciate it as well, even if they have a different style.

I use something very close to Chad’s style from above but I use one extra line

div
…..{
……….background: #FFF;
……….font-style: italic;
……….font-size: 18px;
……….margin: 20px;
……….padding: 10px;
……….font-weight: bold;
…..}

Combining this with comment headers for grouping content makes for a very quick scan and luckily espresso does it naturally.

Oh, and definitely give some thought to alphabetical order (like Justin mentioned). Focusing on the ordering has also made me focus on what I’m adding in as well…
Ross Patterson
March 2nd, 2010 at 2:48 pm

Quite apart from whether one-line or multi-line CSS is prettier, they certainly aren’t dramatically different in file size. Each additional line costs just 3 bytes – CR, LF, and a TAB. If you’re commenting your CSS file, you can’t possibly care about such a small difference – a good comment is equivalent to 10-20 linebreaks.
Chad
March 2nd, 2010 at 3:05 pm

@Hinano

The difference between IDs and Classes are that:

-IDs are unique

-Classes are not unique

So lets say for your site you have a header DIV, which is unique. You will want to define that as . On the rest of the site you have DIVs that you want to look exactly the same, so they are not unique. Each time you call that div, you will want to define it as . Doing it this way is helpful when you start tying into JavaScript.

However if it’s just a basic site, do it however you want!
Chad Huntley
March 2nd, 2010 at 3:08 pm

My examples did not work again!!! They should allow us to post HTML, just not parse it :-)

For the ID example: (div id=”header”)

For the classes example: (div class=”not-unique”)
Ricardo Obregón
March 2nd, 2010 at 3:11 pm

Some of your ideas are good, nevertheless I agree partially with you with in writting CSS rules in one line. I write in one line if a css class has only one rule , nevertheless I write the properties multilined.
E.g.
p{ color: blue}
a{
color: #333;
background-color: #666;
}
Hinano
March 2nd, 2010 at 3:18 pm

@Chad – I understand the unique vs. not unique difference. I just try to minimize my use of IDs. I’ve seen others overuse them.
Minna
March 2nd, 2010 at 3:20 pm

Obviously I think this would only apply to code that is written by humans, not generated code. I came across a .NET dev once who told me to remove all the whitespace in my HTML because it saves on file size. I didn’t agree, I thought it would be negligible to trade off for cleaner code, and he proceeded to show me some site that had generated code with “view source”. Sigh.
Bob Page
March 2nd, 2010 at 3:26 pm

Here’s one of those rare “you can have it both ways” moments.

The PSPad text/programming editor has built-in menu commands to “Reformat Into Structured CSS” and “Reformat into Inline CSS”. You can even flip-flop as your mood strikes you.

Now you can use structured CSS during development and then convert into inline CSS to make it pretty.

It can be freely downloaded at http://www.pspad.com

Now quit your whining!!
Paul
March 2nd, 2010 at 3:30 pm

Completely agree with your primary point. Code should be clean, simple and concise. Not only does it make it easier for following developers to understand but easier to debug.

I do however disagree with your point about making CSS rules all on one line. I personally find this difficult to read quickly and, often, more confusing. UX tested reading lengths dictate that short line lengths are, in general, easier to read to the majority. Thus I would counter argue that tabbed CSS rules are better overall.
Andrew
March 2nd, 2010 at 4:07 pm

Interesting to see that no one has mentioned alphabetically organizing your CSS stacks to make them easier to understand?

Maybe its just me, but I find it helps, as well as indentation.
Ramona
March 2nd, 2010 at 4:58 pm

Worked my CSS each “style” a line. The page was HUGE and when I had to look for something to change, I had to scroll like crazy. For 3-4 months now my CSS is on fewer lines. All in one line it is for me too.

What I hate with a passion is the horrible idea some have to “spread” the elements. Similar to the way the default wordpress CSS is coded. I have 40 sidebar “elements” all in 40 places. And it’s a pleasure finding them all, not to mention seeing sometimes they repeat. I like to work in “areas”. I have the “logo-area”? Everything there is listed, one after another. Menu area .. the div itself, the links etc. Sidebar etc. This way I know where to find my stuff since most of the time I am the one who needs to tweak the designs.
Amber Weinberg
March 2nd, 2010 at 6:17 pm

I’m glad to see we all have different ways of accomplishing the same thing! As we’ve all heard, what works for me, may not work for you, I’m just sharing my own tips. One line CSS is definitely a personal preference, I think it may even have to do with the size of your monitor (I’m on two 22″ so one liners are much easier for me to read).

Keep the comments coming!
Adi
March 2nd, 2010 at 9:30 pm

Cool debate!
Allan
March 2nd, 2010 at 11:28 pm

I think I agree with Amber ( Author ) for her that makes it beautiful, one line works for her as her monitor is 22″ so that makes sense.

I think for me, one line is good, as you see it all and it makes the file light and faster. Being beautiful not just how you write your code, but how optimize it is ( meaning how fast and light ) the code loads.

The more the compact and readable the better.

And its a matter of preference.

“No Matter What, People Always have to say”
Daniel Whelan
March 3rd, 2010 at 1:53 am

I ultimately agree with Amber, clean beautiful code. I love it. When I was getting started I had this vision of how I was going to create these beautiful, sectioned, commented, clean css files, and that was going to in some ways set me apart from those who don’t take the time to do those things. Since then, I’ve found that nobody really cares. I’ve never closed a sale because my code was cleaner than my competition. In fact, the very discussion of things like clean, semantic, or even compliant code seems to just confuse the vast majority of people I speak with.

Perhaps this is a reflection of my clientele… 8-/
Stephen Webb
March 3rd, 2010 at 5:18 am

Paying attention to the organisation and format of your coding is something that often gets overlooked, but clearly has a lot of advantages. All too often you end up working on a site that is poorly coded, or has no code organisation at all, creating many problems when trying to amend the site and CSS.

Having clean and well organised code is proven to increase loading times of sites, as browsers find the sites much easier to render. This will become an ever more important factor as Google has started ranking sites on their load times, and therefore how cleanly they are coded. It will likely become a big issue in the near future.

There are always more ways to optimise your CSS and page coding, so reading this blog certainly gives some useful tips. I expect some of the readers will also have some additional optimisation ideas, I will be interested to find out more.
Mike B
March 3rd, 2010 at 5:19 am

Those are all good bits of advice on clean coding. I believe that clean coding is really important, also when there might be more than one person who may be working on the site over a period of time. But doesn’t google also favour well coded sites?
Michael Wilson
March 3rd, 2010 at 10:47 am

Amber you might want to think about how your write your articles then.

If you are suggesting to readers they try a certain style, then maybe you should explain that it’s just your personal opinion.

The way this is written it is as if you are stating these ideas as fact. I’ve been writing code for years now and I know my personal preference, however, I wouldn’t want an inexperienced CSSer reading this and taking your ideas as the ‘norm’
Amber Weinberg
March 3rd, 2010 at 11:22 am

@Michael I did in the first paragraph under Beautify your css…
Chad Huntley
March 3rd, 2010 at 11:23 am

@Ramona

“What I hate with a passion is the horrible idea some have to “spread” the elements.”

I agree, I just worked with a site that did this. It is a very, very, very bad practice. Not only is it terribly confusing to edit it’s also going to hurt performance (we’re talking milliseconds but its another reason not to use it).
Jami Gibbs
March 3rd, 2010 at 11:30 am

Computer performance is not a valid argument in this case. It’s minuscule. Let’s just call it like it is and say it’s only a matter of personal preference.
Amber Weinberg
March 3rd, 2010 at 12:08 pm

@Jami It’s not miniscule when it’s a large site, that’s why services like CSS minify are so popular.
Michael Wilson
March 3rd, 2010 at 12:09 pm

Amber I missed that and I would like to retract my previous statement

;)
Amber Weinberg
March 3rd, 2010 at 12:10 pm

@Michael It’s ok…I know most people skim articles anyways (I do) ;)
Scott Sawyer
March 3rd, 2010 at 4:16 pm

For small style sheets, multi-line comments are nice, but when there is A LOT of css, single line makes it easier to scan hundreds of rules.

Notepad++ is the best, Firefox Web Dev toolbar!

Validate code, please, and XHTML.

Lots of comments, server side and client side.
Dmitry Dulepov
March 4th, 2010 at 4:48 am

I strongly disagree with putting everything into one line. It is very hard to navigate. I usually do this:

p {
color: black;
text-align: right;
}

I always sort properties alphabetically: it helps to find them much faster. When everything is ready, I use YUI compressor to make a smaller CSS. It is far more efficient than putting everything into a single line.
Robert Campbell
March 4th, 2010 at 9:33 am

One line and two line CSS. For reading and seeing everything that is going on in a rule multi-line is easier to read. Once you find the rule you can see at a glance how many attributes the rule has and quickly see what they are set too without visually parsing through the line.

I actually use a combination, while I am working on CSS. While working on CSS I use multi-line. Then when I know that I have the rule set exactly how I want it I shorten it to one line and it tells me that I am done with that rule.

If I come back later I will expand my one line codes down to multi-lines so that I can read what is going on.
Robert Campbell
March 4th, 2010 at 9:37 am

I didn’t see anyone mention this, but the biggest thing I hate when editing a site is when CSS is spread out through multiple files.

It is easy to search a file for a rule, but to find out which file holds that rule just makes it frustrating.
Kevin Barney
March 4th, 2010 at 10:46 am

I’m finding I’m in the multi-line camp. One line CSS makes it look like an unwieldy, run-on sentence to me. I find it hard to figure out what’s going on without each attribute on another line. I just can’t understand how people can take a list of something, and run it left to right. Drives me nuts!

Could you imagine reading cooking recipes like that? =)
George Palmer
March 4th, 2010 at 1:55 pm

There are some great tips in this article, and some equally bad ones.

In my opinion beautiful code is not important. What is important is structure and convention. Well structured code is usually beautiful but beauty should not be put before convention.

A good example of this comes back to the CSS ideas put forward. While CSS all on one line may be more ‘beautiful’ than multi lined CSS on larger monitors, in my opinion it is very bad practice. You wouldn’t design a website to only be readable on a 22″ monitor, so what makes it acceptable to do this with your code? Nobody knows who will work on their code in the future, but chances are someone other than you will do and you have no idea what device they will be working from (it could be a mobile phone, a netbook, anything..). If of course that CSS is multi line it becomes much more readable across different devices.

In my opinion indented CSS is a must. It clearly shows inheritance and responsibility. If someone handed you a 1000 line style sheet without indentation, could you code the HTML for it? My guess is no. Yet how often do you work on projects where you don’t have access all the HTML (maybe separated into different views in a framework). Without indented CSS it’s very difficult to guesstimate how different styles are designed to be used.

Convention is something that is seriously lacking in web design (client side HTML, CSS..). Any professional web developer (server side PHP, Ruby, Java..) worth their weight will follow a set of commonly used conventions and rules. The importance of convention seems to be greatly underestimated in web design. In my opinion this is a huge contributing factor the the amount of poor code out there.

The simple fact is the Internet as an industry lacks discipline, but that’s a whole other story. :)

Best Regards, George
George Palmer
March 4th, 2010 at 1:56 pm

^^^^ Sorry about the length, I got a bit carried away :p
Jami Gibbs
March 4th, 2010 at 1:59 pm

@ George

Very well put! You wrote exactly what I was thinking but only managed to mash out a one line response earlier.
Amber Weinberg
March 4th, 2010 at 2:58 pm

@George What I meant by “beauty” is organization. I’ve come across sites time after time that have mashed together, unvalidated and unsemantic code. So yes, in that sense beauty IS important.

For the one liner, you don’t have to have a 22″ monitor to use it. Your CSS rules should not be that long, it worked as well on my 13″ as it does on my large monitors. It all comes down to readability. One line CSS is more readable to some, while multi-lines are for others, like yourself.

As for indention, I also don’t like that process. It makes it much harder to read, regardless if it’s one line or multi line CSS. Your CSS should be organized enough via commented sections and (for one line css) spaces between sections.
George Palmer
March 4th, 2010 at 3:37 pm

@Amber

I agree organisation is important and beauty is a by-product of well organised (structured) code. But beauty should never be pursued over structure and convention.

You can’t make the assumption that CSS selectors will never be that long. It doesn’t take a lot for a CSS selector to gain some real length. Five or six rules can easily run into 150 char width. Most designers/developers will be using some sort of IDE which will most likely have a side menu. Now I just tested the above scenario on my 21″ wide-screen and I needed to use the horizontal scroll bar.

And your point on comments, well that’s just getting silly. Over half the Internet’s users are non-native English speakers (can’t find the source now but it was relating to ICANN offering non-english domains). Can you really assume everyone will understand your comments?

Sorry if this comes off as a bit harsh. There is some real good advise in your article but I feel you’ve overlooked the fundamental reasons behind beautiful code. Beauty should not be the aim, structure, convention and clarity should be. Beauty is just a nice side-effect.

Best Regards, George
Amber Weinberg
March 4th, 2010 at 3:54 pm

@George ok now your just arguing for the sake of being argumentative. First off if someone doesn’t speak English, they’re not going to understand css anyways, it being in English. Second, all my clients are English speakers as well as all the sites I do are in English, so I highly doubt that will ever be a problem.

If your opinion is different than mine fine, but that doesn’t mean you’re right and I’m wrong. I’ve been doing this for 10+ years and have neve had a problem with single line css in an IDE with any screensize.

If you think it’s wrong, simply don’t do it. I stated in the first paragraph that it might not work for you. There are no “hard” rules about css organization.
Hinano
March 4th, 2010 at 4:07 pm

@amber – agreed. I’ve been at it for years as well and have never found the formatting of the CSS to be particularly beneficial or detrimental, only bothersome if done poorly. It’s essentially markup. Single line works for me and I’ve never had issue reading others. I used to do it the ‘standard’ way but it took more work to format it than I really want to invest. If they next designer to come along after me doesn’t like it, run it through a filter.
George Palmer
March 4th, 2010 at 4:37 pm

@Amber

I’m sorry you feel that way. My intention was not to argue, I just wanted to express my opinion. This will be my last comment.

Surely you can see how short-sighted it is to suggest that because CSS is English that non-English speakers (or those that speak very little English) will never use it. Outsourcing is big business.

Your way obviously works for you and I can respect that. I’ve not quite been doing this for 10 years (just over 8) but I have a lot of experience. I worked in a team of 16 for 3 years and I know how important coding style is.

No one persons way is the best way. The best way is the one that works best for the widest range of people. The industry need convention but convention can never exist if everyone does it their way.

Coding style is very important and readers should make an educated decision when devising their own style. As you said ‘beauty is in the eye of the beholder’, therefore beauty can not be quantified, so all the more reason to choose structure and convention over beauty.

Best Regards, George
Amber Weinberg
March 4th, 2010 at 4:42 pm

@George I understand.

Your code should always be commented, whether it’s PHP or CSS, otherwise it’s just a long list that no one can understand, much less non-english speakers. I think if a client wants to bring a site to have it worked on by a non-english speaker, it’s up to them and they’ll have to deal with that. Not commenting your code just because someone in a few years may or may not speak English that works on the site (that’s in English anyways) just seems a bit ridiculous. Code is basically in English, so any developer is going to have to have a grasp of the English language. Every international developer, from India, to Japan, to Russia has been able to speak English enough to understand my code.
Ryan
March 4th, 2010 at 5:00 pm

Great read Amber, a lot of very good points in here.
I agree with keeping your code both pretty and structured. Now I am fairly new admittedly, just about 2 years in, but thus far I have found that taking care to organize your code while writing it drastically aids in readability, which in turn gives you a jumpstart on the pretty. :)
I am way too new to thrash on anyone’s opinion, but what works for me is a sweet little editor named Textmate. I am certain there are many online places that can mimic this behavior, but if I have completed compressed code I can, with a keystroke, reformat it into multi-lined uber-readable format. So, does anyone else do something like this? I find myself often times writing the CSS multi-line, and when it comes time to set it live, a keystroke compresses it for me to single line selectors and all. So, it is just a formatting trick, but it makes it nice to compress it knowing that all is structured proper and un-compressing it retains the beauty.
Just my $.02 :)
Robert Campbell
March 4th, 2010 at 5:16 pm

One comment on single line versus multi-line CSS.

I prefer the multi-line method, because it is generally easier to scroll down than to scroll side to side.

Just like designing websites it is generally best to avoid side scrolling websites. Most mice come with scroll wheels that scroll up and down and though some have side to side scrolling now there are still many that don’t.

As for finding the rule you are looking for, if you have a large CSS file you will need to use the find function either way. If you are using the multi-line, indent method you can find your CSS rules just as easy, because they will be the only words that are completely to the left.

My preference mostly depends upon the size of the CSS file. Large CSS fles I prefer the multi-line and indent method, but for small files I don’t really care which way it is.

I have been doing this for just over 10 years and have worked on many other peoples’ code and well logically organized code is the best.

Very few people use my code after I work on it, except for a few open source projects I have, but it still seems everyone has their own preferred methods, but as long as it works and you know your audience.
Dutch
March 8th, 2010 at 12:05 pm

It was a good read, but not applicable for real (not trying to offend anyone here) code (programming). As the structures there get way larger and get far more out of hand. It’s simply impossible to put things on a single line especially when it can look like this.

asjkldfjasl asdfasdflk jasfdasdfalskj asfdasdfasklj aklsdfjalkfdj (afjsdklfj aasfsdfs; asdfkljasl asasdfa; asldfkjaslkfdj; asldfjal;) {
…… aklsdfjaklsjdfjaljsdklafjalksj aslkdfjaskldfj[aksdfasj];
}

askdfajslkdfaj() {
….. askldfjasldkfasjldkf asdfasd;
}

The top one of course would look ridiculous on 1 line, while the bottom one might look OK. However I believe it’s much more important to remain consistent throughout your programming, that makes it much easier to figure out. And I think a lot of people aren’t consistent in their programming at all. And that’s much more annoying, also if you’re consistent it will of course look much more beautiful as well.

Bottom line, your tips might (matter of taste of course) work wonders for css coding, but aren’t applicable in actual programming. (again, not trying to degrade css coding/html or even php, simply saying that in larger more complex programming it doesn’t hold true.)
Amber Weinberg
March 8th, 2010 at 12:19 pm

@Dutch Of course, that’s why I only mentioned putting CSS on one line….putting HTML or PHP on one line would be a unreadable mess.
Jorde Vorstenbosch
March 9th, 2010 at 3:58 am

@Amber yes you are right, when it comes to just CSS it might work (depending on the scope of course). But don’t you think it’s more important to stay consistent than to keep changing everything?

Even when it comes to CSS? I haven’t been doing web development for long, but I kept my own programming principles (as I have been programming for a while) and I’m trying to incorporate them in my CSS, HTML, PHP and JS. However things are quite different per language but I don’t know if I should simply change it per language to make the language easier to read, or if consistency is more important (throughout your programming that is, it is for me in daily life, but because of different browsers etc it might be stupid to do when developing for the web).

I’d like to hear your input

Kudos,
~Jorde (Dutch)
Chris Mahon
March 9th, 2010 at 8:08 am

I long for the day when designers and developers stop worrying about things like this and focus on the things users actually care about.

I’m not saying make your code unreadable but spending time on things like this is time you can’t spend interacting with your users and finding ways of making their time on your app/site better. Focus on the execution, not the nitty gritty.
The Avangelist
March 9th, 2010 at 8:09 am

When you are working with a large application, it is sensible to be running an expanded CSS file for development, but to implement a minified (or every clause to a single line) for performance gains.

Although these gains may seem to be minimal, they can be crucial to eeking out those extra nanoseconds needed to create the perfect experience from a user perspective.
Northern Ireland Hotels
March 9th, 2010 at 8:09 am

I am not a fan of single line CSS and I am not convinced it makes for improved usability.

Sideways scrolling requires extra thought.

Some very valid points none the less.

Cheers,

Lee.
Jorde Vorstenbosch
March 9th, 2010 at 8:25 am

@Chris Mahon, except when the project is larger it’s far from nitty gritty. Because when you’re working with multiple people things like this become much more important.

It also contributes to the experience of the user because the responsiveness can become much higher when you write your program in the correct manner.

It’s quite a bold and ignorant statement to make when you’re pushing people in a different direction. Also without proper arguments.

It’s a good thing to be organized and consistent, that goes for everything, coding(in my case programming) included.
Amber Weinberg
March 9th, 2010 at 8:26 am

@Jorde I’m not sure what you mean. Code should not be “consistent” between each other because each language has it’s own semantics. If you were to make every language structure the same, it would be more apt to contain bugs and be confusing, therefor each language should be structured according to it’s own semantics. It does, however, help to have all of the same language structured the same in a site. It’s messy to have half of your CSS multiline and half of it one lime in the same document. It’s ok to change it up on ifferent sites if you’re experimenting. Thy being said, if you were to look at my sites in sequential order, you’d notice subtle changes in each site. This is because we should strive to constantly improve the quality and structure of our code in each site we do. Does that make sense?

@Chris not sure who you’re referring to because my users DO care about this kind of stuff. This kind of stuff helps things like semantics, validation and SEO. In fact, I’ve built a business around being this nit picky about my code and it’s allowe me to charge 2-4x more than the average developer. While the average user won’t notice this kid of stuff outright, most average users don’t notice many design elements we use, SEO or anything like that, and that doesn’t make it less important, because without those things, it could produce a crappy user experience and then the user would definitely notice/care. So the point that the user doesn’t notice/care is a good thing in couldn’t. They shouldn’t notice it because that makes it’s workin correctly.
Amber Weinberg
March 9th, 2010 at 8:29 am

Sorry about my crappy typing btw. Typin on an iPhone is a PIA sometimes ;)
Craig
March 9th, 2010 at 8:35 am

I personally usually use the single line CSS style.. However, this has, on occasion, caused me to put in two of the same styles with conflicting values because the second style is past the edge of the screen.

I think it’s a matter of personal preference and I tend to adapt my style to make it easier for me depending on the situation.
Jorde Vorstenbosch
March 9th, 2010 at 8:39 am

@Amber makes sense, however what I meant was the way you write your code.

Very simple example

object {

}

h1 {

}

Like that, keep the structure similar (where possible/logical)

Though that’s probably different for you, as I write across different languages, which basically are similar in the way that it’s written. But of course html & css are written way different from each other, so it would be harder to achieve. But the combo php & js. It’s easier to achieve.

But the main difference is probably that I work with different people who need to use my programs as well, so I tend to get consistent throughout different projects, with slight improvements as I advance through them. (not unlike yourself).

Also I would like to add that I don’t know any programmer that doesn’t have a basic understanding of english. (People from the far east included!) (Added because of the discussion between george and amber).
lucideer
March 9th, 2010 at 9:28 am

Finally, a post actually advising one-line CSS blocks! The first thing I have to do when reading anyone else’s CSS is usually to get out my regexp Find+Replace and reformat the entire thing to remove the unnecessarily excessive line breaks and spacing.

Readability is not proportionate to the number of spaces and line breaks you have – more scrolling on the other hand makes reading anything a pain. Concise code, in my experience, makes it far easier for the brain to process that CSS property assignments on a single line are all related to the same element(s).

The one exception is where I have a very long line that wraps, which obviously makes it more difficult to read – in that case I’ll generally switch completely to one property per line (for consistency).

@Jorde Vorstenbosch
I would follow the same rule of thumb as above for scripting. In your object-h1 example, I would preferably write:

object{ /* code */ }

IFF the content of the object is brief enough to fit on one single line – this is actually rarely the case, so the multi-line version you posted will be more common.
Chris Mahon
March 9th, 2010 at 9:39 am

@jorde I’m not saying ignore it completely, and for big teams you need some coding practices that everyone can adhere to in case someone else needs to take on your work. I’ve had that experience at first hand and know what a pain it is to take on work from someone else when everyone is doing their own thing. I’m not trying to be ignorant, and I’m not sure I was, I’m just saying I would prefer to spend my time on other things, that make users lives easier. I’d rather have a website or app that people found useful, than a website or app that was awesome code wise but nobody found useful.

@amber We should be spending time on the tiny design elements because that does have an impact on the experience for every person who comes to your website whether they notice it or not (could be subliminal recognition). How you write your CSS or HTML in my opinion will not impact on the success or failure of a website though. I think if it meets the needs of the user, then how it is built becomes a bit of a mute point. I guess it depends on your target audience, but I’d rather not spend time on how my CSS or HTML looks. I’m not saying I don’t have my own system, because I do, but I don’t set myself extremely tight do’s and dont’s because I know I’ll break them when I’m pushed for time.
Jorde Vorstenbosch
March 9th, 2010 at 9:57 am

I’m not saying ignore it completely, and for big teams you need some coding practices that everyone can adhere to in case someone else needs to take on your work. I’ve had that experience at first hand and know what a pain it is to take on work from someone else when everyone is doing their own thing. I’m not trying to be ignorant, and I’m not sure I was, I’m just saying I would prefer to spend my time on other things, that make users lives easier. I’d rather have a website or app that people found useful, than a website or app that was awesome code wise but nobody found useful.

@Chris, I guess I read your message the wrong way then. Because I agree with you on that, it’s the user’s experience with the application that actually counts. Not how you programmed it. Of course the way you programmed it does account for 90% on responsiveness, stability etc.

I would also love to spend time to make everything look and work as good as possible, however time = money, and money isn’t something you can endlessly spend, especially when it’s not your own money and the supplier (client) does not agree with you.

So yes the focus should be on the user experience.

@Lucideer thanks for you input, it’s just something I don’t like using because my blocks of code normally range between 25-150 lines, with exceptions both ways. (leaving comments out of it btw). And I must admit I throw in one-liners myself here and there because the readability and editbility (new word?) goes up when using them where possible, especially if you got a switch-case block with cases being particularly small.

switch{
…..case(condition){ statements; }
…..case(condition){ statements; }
…..case(condition){ statements; }
}

makes the block of code easier to read of course. Because you can easily compare them.

On a side-note: Working with someone else’s code is a pain in the *rse T-T (Which I unfortunately have to do way too much, bad written programs freak me out so much, I always end up rewriting most because it’s slow, not practical and often just plain wrong for the situation)

Kudos for you clearing a few things up Chris.
Belinda
March 11th, 2010 at 12:07 am

I’m not sure why I do this, but I tend to have multi line css for the majority of elements, but single line for things like link properties. I guess it’s just a habit… Weird!
richard
March 14th, 2010 at 8:12 pm

I personally hate CSS code all in one line. Sure it saves on space but it’s so much clearer to have one indented line per CSS attribute, I also label sections of my CSS with labels corresponding to the HTML layout:

/*sidebar-start*/

#name {
attribute:1;
attribute:2;
attribute:3 4;
}

/*sidebar-end*/

/*footer-start*/

…etc

Another tip I always use after several headaches involving unclosed divs, is I label every closing div with what it’s closing as a comment, for example:

…
Robin
September 12th, 2010 at 10:37 am

We use multi-line for CSS most of the time for legibility, but for a high traffic site where every KB counts, minifying is definitely worth doing.
cheap printing
December 27th, 2010 at 6:16 am

it is widely accepted that clean code is good for everyone, for developers and for those who need to edit the site and indeed for the SE’s.
Calvin Murrill
May 19th, 2011 at 11:49 am

Hey are using WordPress for your site platform? I’m new to the blog world but I’m trying to get started and create my own. Do you need any coding knowledge to make your own blog? Any help would be really appreciated!
Antone Masincup
January 24th, 2012 at 7:12 am

Someone necessarily lend a hand to make severely articles I’d state. That is the very first time I frequented your web page and up to now? I amazed with the research you made to create this particular submit extraordinary. Magnificent task!

Trackbacks

Try searching "Getting Clients" or "Productivity"

Advertise On Freelance Folder

Free Report

Sign up for our product discount list to get a free copy of Why Some Freelancers Thrive and Others Barely Survive. You can unsubscribe anytime.

Forum Discussions

WTS Apple Macbook Air………………$480usd,Samsung I9001 Galaxy S Pl
Feb 7th, 2012 - 3:33 pm
WTS Apple iPhone 4S 64GB---$350,Nokia Lumia 800....$280
Feb 7th, 2012 - 3:30 pm
WTS Apple iPad 2 Wi-Fi + 3G 64GB....$300,HTC EVO Design 4G..
Feb 7th, 2012 - 3:29 pm

View More Discussions

What Is Freelance Folder?

FreelanceFolder is a community for freelancers, entrepreneurs, work-at-home business owners, and web-workers. We strive to bring you the articles, information, and community you need to succeed. If there's anything specific you're looking for, please contact us and let us know! Learn more about us →

Meet Our Team...

Mason Hipp

Mason Hipp is a marketer, designer, and entrepeneur. Mason helps freelancers and small businesses of all types, and he is the current owner of FreelanceFolder.
Ritu B. Pant

Ritu is a freelance writer who has been involved in social media for several years. At the moment he is working on a variety of projects, but is always open to new ideas. You can always find him on twitter as @ritubpant.

Jon Phillips

Jon Phillips is a full-time freelancer, blogger and designer. He loves WordPress and plays guitar in a heavy act. He is also the founder of FreelanceFolder.
Laura Spencer

Laura Spencer is a freelance writer from North Central Texas with over 19 years of professional business writing experience. Together with FreelanceFolder, she wrote the guide on How To Start a Freelance Writing Business.

Name
Email

Discover how to use the best web design tools on the market plus increase your income to $125 (or more) per hour... Sign up here for a free test drive: