10 Principles of the CSS Masters

Related Posts

Check out some more great tutorials and articles that you might like

• 10 Essential Principles of the Javascript Masters Javascript & AJAX
• 10 Principles of the PHP Masters PHP
• Best of the Web - June 2008 Web Roundups

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

1. 

   Jeffrey Way August 25th

   

   In reference to the “clear a floated element” tip by Trevor Davis - I would disagree. Setting overflow:hidden on the container element takes care of it. I’ve never had any problems. Or you can use the extended “containerElement:after” method to clear it.

   
   
2. 

   BlueBoden August 25th

   

   These Techniques are well known among most web designers, working with css based layouts.

   The problem with float is that it is tricky to create multi-column layouts, this is where CSS position is much easier to work with, and of cause it shouldn’t require as much div-it-is as the float based layouts.

   
   
3. 

   Vasili August 25th

   

   I love numbers 4, 6 and 7 the most. Number four and I go back a long time.

   
   
4. 

   Max | Design Shard August 25th

   

   Some good points , i guess every one has there own ways of dealing with css, som better than others.

   
   
5. 

   Jeffrey Way August 25th

   

   Here is a brief snippet from a SitePoint article that details the method I’m speaking of (overflow: auto, overflow:hidden) to clear a child element that is floated.

   “…until last week when SitePoint Forum’s own CSS Guru, Paul O’Brien, nonchalantly pointed out that adding a ‘overflow:auto’ to the outer DIV did the trick. [clearing the floated element]

   ‘Rubbish’ I thought to myself.

   Half an hour of testing later, I was amazed to find Paul was 100% correct - as this example shows. It seems that reminding the outer DIV that it’s overflow is set to ‘auto’, forces it to think “oh yeah.. I’m wrapping that thing, aren’t I?”.

   This fact is so boringly simple that it’s hard to know if thousands of developers are well aware of it, but never thought to mention it. I know I showed the example page to four CSS-savvy SitePoint colleagues and all shock their heads, blinked slowly and said “Whaa…?” (or something similar).”

   
   
6. 

   Jay August 25th

   

   Thank you Jeff.

   
   
7. 

   PureDezigner August 25th

   

   Very help post, also I’m digging the artwork you used to convey the message in each of the principles. Time to update my code structure on my website.

   
   
8. 

   Dan August 25th

   

   I’ve been setting up my CSS like #2 says for years, but never thought anyone else did. I’ve always wondered why people do it differently- this is a breath of fresh air.

   
   
9. 

   oisean August 25th

   

   Underwhelming stuff.

   
   
10. 

    Simon August 25th

    

    Jeff, that is unreal. Never knew it existed (it’s sooo simple), but goddamn I’m glad I’ll never have to type (or something similar) ever again.

    
    
11. 

    insic August 25th

    

    great tips. i like the article

    
    
12. 

    Simon August 25th

    

    Hmm can’t edit my comment, but oisean, I think there is a point where css/html tutes/articles become rather mundane. You’re not really going to find any new/exciting techniques other than the odd little pearl of wisdom (like Jeffs comment).

    
    
13. 

    oisean August 25th

    

    Simon, sure. I suppose this post suffers in comparison with yesterday’s PHP tut.

    
    
14. 

    begs August 25th

    

    “Keep CSS declarations in one line - Jonathan Snook”
    I don’t agree here. It’s awful to edit one lined CSS declarations.
    Readability and of course editability for me as develpoper is much more of weight than the size of the css file.

    Tab and multiline your CSS declarations. Everyone can then edit the file easyly, and also find the right declarations fast. (And if not, they can use STRG+F / APPLE+F)

    And the fact, that a CSS File is much smaller, if there were no whitspaces in it, is true, but if you use images on your page with 100Kb (like in this article) no one cares about 1-2 Kb smaller CSS Files.

    
    
15. 

    Simon August 25th

    

    oisean, indeed

    
    
16. 

    oisean August 25th

    

    Agree with begs.

    
    
17. 

    Blaž August 26th

    

    Nice article for beginer like me :). Time to change some code on a page that I am working on :). Oh and thanks Jeff, your method is to simple to be true.

    
    
18. 

    Niklas August 26th

    

    Once again you guys open my eyes to new blogs and new websites! The article talks about interesting ideas. Even though I don’t agree with all entries new ideas and thoughts is always nice to read about. Thanks for another great, inspiring, article!

    
    
19. 

    Shane August 26th

    

    Interesting list - thanks for posting.

    
    
20. 

    James August 26th

    

    @BlueBoden - Creating a multi column layout does not have to be hard with CSS. Have a look at some of the examples here: http://www.pmob.co.uk/

    I liked and agreed with most of the points made with the tutorial. I have to agree with Jeffrey’s comment on the whole clearing floats issue.

    I can see where Mr Snook is coming from on his, “keep declerations on the same line” rule but seriously, the only benefit I see in doing this is saving a bit of space. I cannot quite understand how the CSS file is more maintable if you do this. Surely a CSS file will be easier to manage with the traditional CSS decleration pattern:

    element.selector {
    property: value;
    property: value;
    property: value;
    }

    I can see how scanning a document might be faster with Snook’s approach but an entire ruleset can get quite lengthy and ends up being ugly in the text editor if it wraps (and harder to look at and add to or take away from) - and if it doesn’t wrap - like in Aptana - then you’re left with horiztonal scrolling which I hate!

    I like what Snook says about letting block elements fill space naturally… Too many people feel that they have to define a width for everything!

    Anyway nice list, thanks Glen!

    
    
21. 

    Ben Griffiths August 26th

    

    This was a great post - although I agree about the one line method, I hate that style

    
    
22. 

    Raul Pedro Santos August 26th

    

    I also have to agree with begs.

    Having a CSS rule in just one line is confusing as hell. It may seem simpler but studies have proven a long time ago that, when looking for something, it’s easier to scan vertically along the first letters of the text, than it is to scan horizontally. And it’s quite simple to understand why, too. If you scan vertically, you just need to read the first couple of letters to know right away if that’s what you’re looking for, while when scanning horizontally you have to go through all the text because you can’t see as easily where a declaration ends and the next one starts. Scanning vertically allows you to look *immediately* at the beginning of each declaration.

    If file size is crucial, then you can always use a compressor on it, to remove extra white space and unnecessary newlines. But only when deploying the site; I would never work on a CSS file like the article says to.

    
    
23. 

    Jayphen August 26th

    

    Nice article, though I don’t agree with #2 or #5.

    #2
    This simply looks a mess, in my opinion. Properly commented, sectioned & tabbed CSS beats having everything on one line any day, especially if you have more than one person editing a CSS file. If your problem is trying find a selector, a simple ctrl-F search will find it instantly (assuming you know the name of the ID or class, but why wouldn’t you?). If you have a lot of properties and values on the same line, it is difficult to find exactly what you’re looking for among them, and you can’t as easily ctrl-F and search for what you’re looking for, as it will undoubtedly appear many times throughout the entire CSS document.

    #5
    As mentioned before, overflow:hidden on the containing element is a much more elegant solution to this problem.

    
    
24. 

    Gafroninja August 26th

    

    I have to say, I partially disagree with Jonathan Snook on point #2.

    I think its wrong to say not using single line declarations is “bad”. I believe its more preference since there is almost no gain in file size. Some people find it easier if the declarations are over multiple lines some find it easier if it’s over single lines.

    I use both. Any element that has less than 3 declarations, i use single line. If any more I use multiple lines.

    Other than that, these are all good.

    Just my view not a hardcore fact or standard.

    
    
25. 

    insic August 26th

    

    Keep CSS declarations in one line? i dont think so. for me, it makes your stylesheet horrible to read. im not againts with the masters, its my own idea only. hehehe

    
    
26. 

    Ryan August 26th

    

    > “Keep CSS declarations in one line - Jonathan Snook”

    What nonsense, this is nothing more than personal opinion so shouldn’t be listed as some sort of definitive rule. Single line declarations can become very hard to read, indenting and setting decelerations on individual lines is good for the same reason it’s good to correctly format PHP, JS, Python, HTML etc… but as I say it’s personal choice and the one line approach is certainly not *the* best.

    
    
27. 

    Ryan August 26th

    

    Also I’ve not used empty clearing divs for years, there’s no need to add useless markup since the solution can be accomplished for more efficiently through CSS. The CSS approach is also far more flexible if you decide to change the layout.

    
    
28. 

    oisean August 26th

    

    So we all agree that single-line declarations are a good idea, then?

    
    
29. 

    Iain Edminster August 26th

    

    I’m glad to see other people disagreeing with “Keeping CSS declarations in one line”. This “rule” is more like personal choice. If you are working on a website with other people, doing things like this would be counter-productive. I’ve found the best way to write CSS is to separate key declarations into separate files contained in a single folder and then gather them all, compress it and cache it. Same thing can be said with Javascript files.

    
    
30. 

    FlyboyArt August 26th

    

    While I admit it’s harder to edit CSS if it’s on one line, it truly saves some space and time in downloading. If you ignore all these 1k here, 1k there things then you’re website will become bloated. To be truly efficient, run your CSS file through a compressor (like we do for JS files) before you send it along to your website. Edit it in any fashion you want (one line or many) but at least upload it in the most efficient format for downloaded by browsers. They don’t care how it looks, just that it’s formatted properly.

    My two cents… ;=}

    
    
31. 

    Anthony Short August 26th

    

    I should point out that with #4, you really shouldn’t have box model issues unless you’re accounting for IE5.5. IE6 renders the box model fine if its in strict mode. Add widths, margins and padding to whatever you want, you won’t break it in IE6+.

    
    
32. 

    shubox August 26th

    

    #2 Snook’s idea of keeping CSS in one line? I’ve heard this before and disagreed with it then, and disagree with it now. I have never noticed any file size difference or performance difference when using inline vs multi-line method. And in terms of ease of editing, the multi-line method is startling easier to look at and identify each part. Inline might work for Snook, that’s fine - but is certainly NOT bad practice to use multi-line layout for css.

    
    
33. 

    Dan Harper August 26th

    

    With most of the other comments, I completely disagree with keeping declarations on one line. Although, it’s really just personal preference and everyone develops their own way of laying out a document.

    
    
34. 

    Philo August 26th

    

    Nice Article!

    
    
35. 

    Joris August 26th

    

    I agree on most of the things although I’d never use negative margins for a standard, they don’t always come out correctly and I only use them as a ast resort.

    As for the centered content I used to love it but after reading some usability studies etc I changed my mind, same goes for centered navigation, like underneath the header for example.

    
    
36. 

    Ben W August 26th

    

    No, no no. I really can’t handle CSS declarations on a single line - someone I work with does that and I find it takes me MUCH longer to edit their CSS files. Also their CSS is always a complete mess with many duplicated ids/classes/attributes.

    I find it best to indent like this:

    #someid {
    background: #FFF;
    border: 1px soldi #CCC;
    font-size: 1em;
    }

    Then it’s very easy to scan down the left side and find what you need. Attributes should be in alphabetical order too.

    Other than that - good advice - nothing new though (to me).

    BTW in #8 you say “Zeldman stresses the importance of a) actually using a DOCTYPE, and points out that you have to add an url in the declaration like so:”

    Like what?

    Looks like you omitted the example.

    
    
37. 

    Ben W August 26th

    

    Damn - looks like my indenting got “parsed out”. Bah!

    OK - in my CSS declaration, each attribute and the closing brace should be indented to line up with the opening brace (plus an extra space or two).

    
    
38. 

    Web Designer August 26th

    

    Thanks for this!

    
    
39. 

    Dan August 26th

    

    I prefer indenting than putting everything one one, RE one line css.
    I don’t like having to scroll to the right to read my rules.
    If you indent properly you get the same effect of being able to scan read the selectors.
    And of course, you can always add comments to remind you what everything is.

    
    
40. 

    Alper August 26th

    

    Thanks for Article!!There are some good points that every css master’s should take care

    
    
41. 

    Dan August 26th

    

    Good comments going on here

    
    
42. 

    Ian Stewart August 26th

    

    For what it’s worth, I didn’t know about overflow:hidden for clearing floats until I read Transcending CSS.

    Also, one line CSS = crazy talk.

    
    
43. 

    Jeffrey Way August 26th

    

    I suppose I should weigh in on the CSS one line discussion. I, personally, prefer the vertical method. However, it is true that your file sizes will be larger this way. To compensate, I always run my stylesheet through a compressor just before deploying a project.

    
    
44. 

    Wayne August 26th

    

    Single line declarations? Bah. Keep it readable, dude.

    
    
45. 

    S.K August 26th

    

    One fun alternative to float layouts is the inline-block property. A couple of advantages I can think of right now include being able to use the vertical-align property and no float bugs. Just remember to unclude display:inline in your IE stylesheet.

    
    
46. 

    David Parker August 26th

    

    Like many other said, #2 is bunk. Keep your declarations on multiple lines and tab them. Also, if you’re worried about space, then run your CSS file through a script to remove all whitespace before you deploy. Best of both worlds.

    
    
47. 

    Nate August 26th

    

    Good article.

    
    
48. 

    Kevin Quillen August 26th

    

    I think #2 is completely and utterly wrong. Single line formatting only makes things that much HARDER to find the rules you are looking for. Tab indentation makes reading more easier. What if your PHP/CF/ASP applications were all on a single line?

    In a business environment, that rule must be expanded upon to a level of consistency wherein coworkers follow the same style of formatting… example, reference with absolutes like div#container, instead of just #container. With that, the CSS sheet should follow the markup of the document, i.e. footer not being delcared at the top, header in the middle, etc.

    This rule really only works within your own work. When a CSS sheet grows to 1000 lines, its very difficult to filter visually for what you are trying to find.

    
    
49. 

    Aaron Irizarry August 26th

    

    Thanks for the article… good brush up, and good to compare views on techniques.

    thanks!!!

    
    
50. 

    Michael Thompson August 26th

    

    Real CSS masters have a text editor (eg., Vim) capable of folds; making the declarations appear on one line until unfolded to reveal multi-line style definitions.

    I’d like to up the ante on this debate by quoting Roger Johansson from his blog post, CSS Tips and Tricks, Part 2:

    “When I combine selectors, I normally put them on separate lines. I find it easier to find things in the CSS file that way. Next, I leave a space between the end of the last selector and the opening brace. Each declaration goes on a separate line, with no indentation and no spaces around the colons separating properties from values. … Finally, the closing brace goes on a line of its own.”

    The style that CSS is written in is purely personal, and a rule imposing one person’s preference should never have been included in this article. Otherwise, good article.

    
    
51. 

    Paul Gendek August 26th

    

    I don’t agree with Johnathan Snook either.

    It’s called Cascading Style Sheets, they should be cascading.

    If it isn’t easy to scan through, then you didn’t organize it very well. Obviously an optimized stylesheet is best for dense CSS on production sites but I find that keeping my CSS organized and cascading by nested elements works best… for organization and ease of readability!

    
    
52. 

    Jason August 26th

    

    I used to be a multi-lined CSS person. I have just recently changed to single-line and personally love it. There is nothing less readable about it and it makes finding the one you’re looking for fast and easy. If you find yourself tinkering with your CSS a lot multi-lined may be easier but I usually don’t have to. Using the single lined method has also removed the need to comment different sections of my style sheet. Do two sites with single-line declarations and you’ll probably never go back to pressing enter and tab after every attribute.

    
    
53. 

    Andy Ford August 26th

    

    #2 is just bad practice and makes for a very difficult to read/scan file.

    I will say that if a css declaration block has only one property in it, then I will usually format it as one line. But as soon as there are 2 or more properties, then I put them on separate lines.

    The extra few KB you’ll save by putting each declaration block on one line just doesn’t pay off in my opinion.

    If bandwidth is a concern, then you’ll probably just want to use an automated css compression tool for your production css file.

    
    
54. 

    Erik August 26th

    

    Beyond just the concept of readability, there are other aspects to consider when evaluating tip #2. Those being, the usage of source control (SVN, Git, etc.) and being able to cleanly track diffs throughout development. Having all of your declarations on one line effectively kills any method of tracking minutia changes.

    As many others have stated before, its far more sane to leave your rules on multiple lines and skip premature optimization (letting an optimizer do the heavy lifting at deployment time).

    
    
55. 

    ron August 26th

    

    #2 is really stupid.

    first, theres this handy thing called the tab key which indents the rules for an element so the element names stand out for quick scanning. really, there is!

    second putting all the rules in a line often wraps the line thus destroying the stupid reason you did it that way in the first place.

    third, now that you so smartly put every rule in a line, how easy is it to now scan the rules themselves?

    and if you’re so concerned about saving the huge amounts of wasted bandwidth that result from spaces and tabs, you’d use one of the CSS compression tools.

    
    
56. 

    Jason August 26th

    

    @Paul - I think the cascading refers to the properties, not the layout of your document.
    @Michael - There are hundreds of ways to skin a cat, and seeing that this article is titled “10 Principles of CSS Masters” that means that these are the ways that these guys that are considered experts prefer to do things. One of them could have easily have been use external style sheets - but that kind of goes without saying because we ALL subscribe to that principle. Another would be using browser conditionals and separate style sheets to make sure those CSS hacks don’t come back to bite us when future browsers are around. We probably all subscribe to that theory as well so including it in this list is pointless.

    In the end, you have to throw something debatable in there to get the conversation started.

    
    
57. 

    Arnaud Talaia August 26th

    

    Maybe it’s just me, but I would totally disagree with having the code written on one single line..

    Yes, it does save space and coding lines,

    YET

    reading is sequential and, much in the same way that comas will help make a sentence a little easier to be heard by puting a sound gap between two ideas, writing bunches of code in deifferent line, helps understand the architecture of the code.

    To me that one advice has definitely been writen by one tech-guy for another tech-guy : not common (and humble) people !

    Coding space is cheap, if it helps to make the code look clearer : use as much of it as you’d like ! That would be my advice..

    
    
58. 

    ren August 26th

    

    I don’t agree with you about the one line declarations. It is very sloppy coding. We should share our CSS code by making it as easy to read as possible.

    td
    {
    background-image : url(transparency.png) ;
    color : ffffff ;
    font-family : “Journal” ;
    font-size : 25px ;
    line-height : 30px ;
    padding-bottom : 30px ;
    padding-left : 30px ;
    padding-right : 5px ;
    padding-top : 5px;
    vertical-align : top ;
    }

    
    
59. 

    Josh August 26th

    

    I don’t care for #2, just compress your CSS. The rest are all very good. I will have to share it with everyone at work. Thanks!

    
    
60. 

    KangarooDeziner August 26th

    

    I’ll add my two cents as well, I suppose.

    I’m also going to have to agree with #2 here. How you write and read your CSS in the terms of one line or multi-line isn’t something that needs to be set in stone. There is no “right” way. Both have their advantages. Personally, I’ll use the multi-line way, because I work with a team of developers and we’ve all agreed that’s the best way to go about it for readability purposes.

    For number 3, this is a good idea, but there are very few sources that show how to use CSS short-hand effectively.

    http://www.dustindiaz.com/css-shorthand/

    I think this article has great examples of how to do shorthand correctly. You have to be careful when you write shorthand, there are very specific orders. Most of us know TRBL, but not many will know the exact order of Font.

    http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/

    This article also has good tips.

    For number 5, I’ll have to agree with the people who posted the overflow: auto/width solution. Adding a clearing div isn’t semantic markup. It’s presentational as opposed to structure. There may be times where this doesn’t always work, but believe me, I’ve come across times where this is the only method that does work, because a clearing div does not stay consistent between IE 6 and IE 7. It’s good to know multiple ways to solve a problem, and use the solution that fits for that scenario.

    As for number 7, you’re forgetting an important part of the method there.

    “#container { margin: 0 auto; width: xxxpx; text-align: left; } ”

    This does not center a layout in IE. To center the layout in IE, you need to add “text-align: center” to an element that wraps around container.

    And I’m not sure how 7 differs from 9. The principle is the same. You’re centering an element. I’m not sure it needed to be on here twice.

    And for number 8, it seems there’s an example that may be missing. It says “add an url in the declaration like so:” but then doesn’t show an example (at least not that I can see).

    
    
61. 

    Kevin Quillen August 26th

    

    It’s still stupid because you are thinking from first person perspective. The way youformat your documents should be agreed upon within your working environment. We have multiple people working on layouts so we need to be as friendly and readable as possible so anyone can jump in and figure something out. It takes longer to read single line.

    Real CSS Masters using VIM is just a geeked statement. Anything you can do editing in gets the job done, from Notepad, to Notepad++ (me like) to Dreamweaver. So long as the code is written.

    
    
62. 

    Dino August 26th

    

    Nice tips! I’ve been using rule#2 for almost 5 months now and I can say it made my work faster and simpler. Plus it’s a lot easier to find errors.

    BTW, what’s with the Japanese drawings?

    
    
63. 

    Ericka Wright August 26th

    

    @Jeffrey Way: I was just curious if you are able to make overflow:hidden or overflow:auto work with a PNG fix for IE6 such as: http://www.twinhelix.com/css/iepngfix/ or http://labs.unitinteractive.com/unitpngfix.php ? I’m afraid I’m not clever enough to write my own code to fix the IE6 PNG problem and when I tried using overflow:auto and overflow:hidden to work with the fixes, it broke the layout badly.

    
    
64. 

    Jared August 26th

    

    I agree #2 is just a huge waste of time. I work with a guy who started writing his CSS that way, and as just about everyone else has said so far, multi-line tabbed CSS beats single line any day of the week

    
    
65. 

    Carlton Dickson August 26th

    

    I don’t think putting CSS declarations on seperate lines should be labelled as *bad*. The chosen method should ultimately help the CSS developer(s) organise declarations in a clean way, that is easy to work on and is maintainable for future updates…the only downside for me is the file size but you can easily run the CSS through a minifier if you’re worried about that.

    Personally I use single line declarations but prefer to put the properties in alphabetical order.
    I know other developers that use multiline declarations and indent code which also helps organise things and is quite a good way of structuring CSS.

    
    
66. 

    Jeffrey Way August 26th

    

    @Ericka - I’ve never had any problems. But, if the overflow method isn’t working for you, you can try the alternative.
    
#elementWithFloatedChild:after
{
visibility: hidden;
content: ".";
height: 0;
display: block;
clear: both;
}


    This will work too on modern browsers. To compensate for IE6, which doesn’t support “:after”, set a height value to the container element. IE6 incorrectly reads “height” as “minimum height”. Consequently, it will expand to fill its contents. Hope this helps!

    
    
67. 

    Nathan Smith August 26th

    

    The #2 tip is a matter of preference, not a recommendation of best practice. In fact, I would go so far as to say it is erroneous. I have run into problems with people writing all their declarations on one line, increasing the likelihood of errors. In general, if a horizontal scrollbar is bad in web page layout, why would anyone permit a horizontal scrollbar in their CSS code? As for file-size savings, you could always use a CSS compressor…

    http://www.cssdrive.com/index.php/main/csscompressoradvanced/

    That being said, the other 9 tips are right-on.

    
    
68. 

    Andi Kalsch August 26th

    

    - Rules 7 and 9 are the same.
    - Rule 2 makes no sense because editing and overviewing defined styles for a rule is important, too. There are other ways to find rules quickly. E.g.

    h2 {
    rule;
    rule;
    }

    This is better for me and dynamic server side CSS compression is another solution to make your pages loading quicklier.

    - Rule 1 is the most important. Keep it simple. CSS is just a way to style your content. Most important is the content. Don’t use ugly hacks that will have to be removed, when the next browser version is coming up.

    The techniques you describe are well-known among web designers and were not “invented” by single persons. So I really ask myself if I am a CSS master now (???)

    
    
69. 

    Michael August 26th

    

    I have to disagree with #2. In the 10 years I’ve been designing and developing web sites, it has been my experience that dividing the CSS across multiple lines makes it far easier to maintain.

    Often times its a matter of preference to be sure, but you also need to keep in mind the next person who has to come along and maintain your code. And as was already mentioned, the file size savings are nearly unnoticeable. Far better to have easy to maintain code than to try and save a couple of KB.

    Create a coding style guide and stick with it. This not only helps others who may have to maintain your code, but can also be a benefit to you. If your code is styled in a standardized way, you and those you work with, can much more easily find what it is that you or they are looking for.

    Also, don’t be afraid to use comments. Commenting your code, whether HTML/XHTML, CSS, JavaScript, PHP, Ruby or what have you, can be a HUGE benefit when you come back to do some work on it weeks or even months later. It makes it much easier to understand why you did things a certain way, and with the knowledge you have gained in the intervening time, you may just be able to make that part work a little better.

    
    
70. 

    andi August 26th

    

    Does anyone have any objections to #2 - I haven’t read any.

    Well except the first two thousand.

    
    
71. 

    Miles Johnson August 26th

    

    This statement is not entirely true “Not only does this approach help with quickly scanning your CSS, it also helps in keeping your CSS file smaller by removing unneeded spaces and characters.”.

    Ive written a CSSMinifier PHP script that strips all whitespace/comments and anything else not needed. It took a 190k file and made it 180k. That is not a big difference at all and nothing worthwhile… and in its place you get a giant css file on 1 line, for what… 10 measly k?

    
    
72. 

    Vaçlav Rant August 26th

    

    Great post! I am not too sure about a few things though, I think you miss a few important principles and techniques Eric Meyer — http://meyerweb.com/eric/thoughts/ — and Jens Meiert — http://meiert.com/en/blog/categories/web-development/ — describe…

    
    
73. 

    Amy August 26th

    

    Pretty good article, not a whole lot of new info but good for reminding you who you should be keeping tabs on in the web world.

    Regarding Snook’s most controversial quote: I do a combination of 1-line and tabbed-multiline css declarations… basically if I’m adding one property I will do it single line because I hate having to enter+tab for just one property, not to mention it’s not hard to read. Anything more than just one property gets broken up into multiple lines most of the time. I don’t worry about ease of scanning because I utilize the Find & Replace feature on my editor. I think some CSS gurus are SO efficient that they probably don’t need to go back into their code too much (so the 1 line declarations would be appropriate), but for me, I still do a lot of experimentation.

    I’m really interested in trying out the overflow:auto in lieu of empty clear elements. It seems to make a lot of sense and would make me feel a whole lot less guilty!

    
    
74. 

    James August 26th

    

    @Miles - I agree with you but 10k can become quite a significant amount, especially when developing for mobile sites.

    
    
75. 

    John Deszell August 26th

    

    All good tips I think.

    Though I don’t and don’t like writing all my CSS in one line. For me it’s harder to read and just doesn’t seem right to me. The amount of file size saved is super slim if much of anything. Maybe 1 or 2k at the most (and thats on a HUGE site).

    
    
76. 

    Jen Germann August 26th

    

    Great article. Everyone has their own way of doing things and some of these tips are better than others. Actually, your comment from Sitepoint about the overflow:auto trick is probably the most valuable part of the article, for me.

    
    
77. 

    Matthias König August 26th

    

    Nice article, but i don’t think that points 2 and 4 are good ideas…

    Point 2: The Code might look “smaler” when you write everything in line, but it’s much easier to find mistakes when the attributes are NOT in line, i think.

    Point 4: Doesnt help keep the CSS clean, doesnt it?! For example:

    I have a container (Content) with all the things in it (headlines, p’s, img’s, ul’s, a’s, etc.) - why give every object the same margin or padding instead of giving it only to the container?

    2nd possibility: often i have a Content-Container with 2 Coloums in it (”left” an “right”, floatet). But there will be some Pages (f.e. Contact) which won’t use the coloums. When i delete the 2 coloum-divs, the padding/margin of the container helps to hold the Contact-Content where it should be.

    Much easier than give hundrets of objects the same padding/margin…

    
    
78. 

    sean steezy August 26th

    

    I didn’t realize that:

    1. One comment from a “CSS master” would spark like 80% of the comments on here
    2. That its a big deal to some people
    3. The hide overflow thing. Thats sweet.

    Thanks for the post. CSS is something that I learned from doing a lot of and some stuff I never bothered to try b/c it didn’t seem to do anything. Sweetness.

    Fave up has the bomb diggity CSS sites to checkout.

    PS: I create a section of my CSS for one-line declarations for small things like text colors, sizes, and fonts, etc. and then the main stuff like containers and such are on their own separate lines…. take THAT!

    
    
79. 

    Jonathan Snook August 26th

    

    @sean steezy: yeah, apparently multi-line declarations is like a religion. To further fuel the fire, you can even see what my code actually looks like:

    http://flickr.com/photos/jonathansnook/2800852816/

    I have a system and it works great for me but I have no intention of forcing it on anybody. If people don’t like it, fine, but for me, it helps me get the job done faster and easier. And as many people have said in other threads, it’s an easy search and replace to get multi-line declarations back.

    
    
80. 

    AD August 26th

    

    I completely disagree with number 2.
    This goes against any readability principle used for other languages or for any written document.
    The size of your css files doesn’t matter when you work on them. If you are looking for performance, some utilities can compress your css and javascript files before you deploy.
    Readability is also not an issue. If you are a serious developer, you use a text editor with syntax coloring, so you can easily browse through your declarations, whether they are one line statements or multi-lines statements.

    
    
81. 

    James August 26th

    

    @Snook - Like I said in previous comments, I can see where you’re coming from and I have to say that your code does look quite manageable - but I still prefer the traditional way. Plus, don’t you hate having to scroll horizontally??? (But I guess u can wrap)

    I can also see how it’s easier to scan the document and find a specific selector but it becomes hard to scan through all the individual decelerations.

    As far as I’m concerned it’s the same deal when using JavaScript:

    var object = {property: value,property: function() {doStuff();}}

    There is no way that the above is more readable then this:

    var object = {
    property: value,
    property: function() {
    doStuff();
    }
    }

    
    
82. 

    James August 26th

    

    Eh Oh!!! … My tabs were lost in the post above… Gawd, okay - with underscores instead:

    var object = {
    ____property: value,
    ____property: function() {
    ________doStuff();
    ____}
    }

    
    
83. 

    Jerry Chen August 26th