5TIPSFORORGANIZINGYOURCSS

Working with CSS on my own site’s redesign, freelance work, and my job made me start thinking about the best way to standardize and organize the way I write my CSS. So, I proposed the question to my 9rules friends to collect the best tips from the best designers.

1) This tip is perhaps the most useful because it can apply to both formats of CSS organization that I will describe later. I first saw this on Mike Rundle’s latest redesign of 9rules where he indents descendant and related rules.

For example:



#main_side { width: 392px; padding: 0; float: right; }

#main_side #featured_articles { background: #fff; } #main_side #frontpageads { background: #fff; margin: 8px 0; }

This structure makes it easier to define page areas and how they relate to each other.

Also, the technique can be used when styling specific areas even if the base requires no rules. This can best be seen in the headlines:



h2 { }

#snapshot_box h2 { padding: 0 0 6px 0; font: bold 14px/14px “Verdana”, sans-serif; } #main_side h2 { color: #444; font: bold 14px/14px “Verdana”, sans-serif; } .sidetagselection h2 { color: #fff; font: bold 14px/14px “Verdana”, sans-serif; }

2) The second tip is to use shorthand properties to keep all parts of a style type on a single line.

For example:


margin:5px 0 4px 10px;

Is much more efficient than:


margin-top:5px;
margin-right:0;
margin-bottom:4px;
margin-left:10px;

Combining properties onto a single line using shorthand properties means that your CSS will be easier to understand and edit.


#test {
      margin-top: 2px;
      margin-right: 3px;
      margin-bottom: 5px;
      margin-left: 9px;
      font-weight:bold;
      font-size:12px;
      line-height:14px;
      font-family:Arial, Verdana, sans-serif;
      border-width: 1px;
      border-style: solid;
      border-color: #000000;
      background-color:#fff;
      background-image:url(bg.gif);
      background-repeat:no-repeat;
      background-position:0 15px;
}

That is almost impossible to edit, but using a few shorthand properties, the chunk above can be reduced to a much more manageable four lines.


#test {
      margin: 2px 3px 5px 9px;
      font: bold 12px/14px Arial, Verdana, sans-serif;
      border: 1px solid #000;
      background: #fff url(bg.gif) 0 15px no-repeat;
}

3) The third tip is to clearly divide your stylesheet into specific sections. Also, by using a flag, you can get to the area you are looking for faster. Before you divide up your styles, it is important to define an outline you are comfortable with as will as a separator format you can notice easily.

A sample format I try to stick to is this:

  • Global Styles – (body, paragraphs, lists, etc)
  • Header
  • Page Structure
  • Headings
  • Text Styles
  • Navigation
  • Forms
  • Comments
  • Extras

And a sample separator that is most easily noticeable for me is:


/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/

4) The fourth tip is difficult to get used to, but can be invaluable once perfected. It is important that you define the basic rules for each area only once so that the same default value is not being rewritten in every rule. If you know that all of the h2’s will not have a margin or padding, define that on the top level and let its effect cascade as it is supposed to. This helps a great deal if the design requires frequent color changes or other non-structural modifications.

5) The fifth tip is more of a comparison between to major options of organizing your CSS, each with it’s own merits and flaws.

On one hand, you can throw your CSS into a compressor to get a very polished and clean view of your entire CSS structure – each rule on a single line. The advantage of this method is that you can get an easy view of your entire stylesheet without much scrolling. The disadvantage is that it is difficult to edit because many rules will require you to scroll horizontally.

Using the more prevalent tabbing method for organization simply reverses the advantages and disadvantages.

The easiest method is to combine all of the tips above to move the base styles for all elements into a separate section of the stylesheet or a separate stylesheet altogether. This leaves less rule-setting for the more specific elements and allows you to have a shorter stylesheet for your main design.

  1. Nice article, will use it on my site

    Matthew Ulm

    Jan 18, 08:38 PM #

  2. Nice article. Good tips, here!

    That having been said, I have to say that, at least for me personally, I find CSS written using all the shorthand to actually be harder to read. I think condensing your CSS to shorthand s a good idea for bandwidth reasons, but I actually prefer to work with and edit the longer versions. I usually wait until I’m basically done to condense things to shorthand.

    I might be alone on this, but that’s my feeling. :)

    Jeff Croft

    Jan 18, 08:42 PM #

  3. Re: Jeff’s comment – I usually use shorthand, but will long-hand something if I want to over-ride just one particular thing. For instance, if I’m happy with the margins, except for the top of something, then I’ll use margin-top to tweak it.

    Nathan Smith

    Jan 18, 08:52 PM #

  4. Matthew: Glad I could help, although I should re-mention that most of these tips are my fellow 9rulers, I just collected them.

    Jeff: I agree with you that a prototype version differs greatly from the finished version. I usually begin with the basic CSS within the HTML page itself to set up the markup and CSS together, then move it to an external stylesheet.

    Usually I keep my font styles expanded and only use shorthand for backgrounds, margins and paddings because it’s easier for me.

    Nathan: Yup, I do the same.

    Thame

    Jan 18, 09:13 PM #

  5. Uh – is there something non-obvious here? If you’ve been using CSS for any length of time, this is all stuff you’re already doing. Hello?

    Interesting how your required fields fill themselves too – I assume that’s a bug?

    Band of the Soulstripper

    Jan 19, 01:27 AM #

  6. There’s always one in the crowd that has to complain. Why did you even bother looking at an article for “Tips to Organize CSS” in the first place?

    Regarding shorthand, I’m a bit of a mixed bag. I always put all of my margin and padding dimensions on one line, but I usually define font styles with separate lines for family, size, and line height. One thing that I found recently (and was rather annoying until I figured it out) was that there are situations where if a background-color isn’t defined in shorthand with the background-image, it won’t render. I don’t know exactly what caused it as I didn’t test it after getting it working, but I believe it was a floated div with a background image positioned with coordinates (no repeat, so the color was supposed to fill in behind it).

    Justin

    Jan 19, 01:48 AM #

  7. I only use shorthand for short values. It makes it easier to read for me. Though I must say, I have this odd hate for shorthand colors.

    I like the indentation for child styles, dunno why I never did it, but now I’m going to.

    Truth be told, there is no right or wrong way to format your code. As long as I can read it, it’s good enough for me. At some point, you have to realize that the majority of the people looking at your code are other coders, you can leave some of the thought to them. They’re smart too! ;)

    Andrew

    Jan 19, 02:00 AM #

  8. Great stuff as usual Thame.

    Paul Stamatiou

    Jan 19, 02:08 AM #

  9. Simple stuff really if you’ve worked with CSS for over a year.

    The first rule I always apply is;

    * { margin:0; padding:0; border:0; }

    Then I add borders, margins and padding when I need and not keep writing margin:0 over and over.

    Chris R

    Jan 19, 03:46 AM #

  10. How about “properties should be specified in alphabetical order”, that line is used pretty often in similar articles.

    Vesa Virlander

    Jan 19, 03:58 AM #

  11. Is it just me, or are the “tips” posted above so obvious/duuuuh-like that this article totally becomes obsolete?

    Bramus!

    Jan 19, 04:12 AM #

  12. I think that as a lone CSS coder it’s fine to say anything one wants in terms of code structure, but when a team hacks up the CSS it usually goes to bits. Unless the CSS rules initially defined by the designer are explicitly tied to the other team members’ paychecks, guidelines fall to pieces when the client comes a-calling. That’s my experience as of this post!

    Anonymous Coward

    Jan 19, 04:18 AM #

  13. Regarding tip #4, you can always cascade a default set of properties, and override it in the individual items, if need be.

    markku

    Jan 19, 04:32 AM #

  14. Great tips, I must admit the font shorthand property is pretty complicated – so I generally split that up.
    I did try to split my CSS into positioning and typography sections – and my advice is don’t! It’s too easy to get lost when there are multiple instances of classes!

    Alex

    Jan 19, 04:33 AM #

  15. Nice article. Many of us needs some rules to code better.

    And there are some idiots here writing a “I know that , duh” comments. Please….

    swape

    Jan 19, 04:39 AM #

  16. I like the article and was happy to see that I’m already doing most of it :-) The ident tip was new though and I’ll start using that for sure.

    One thing I’ve tried on a few occasions is to seperate styling from positioning. So that one stylesheet takes care of styling while another takes care of positioning. It’s overhead in that classes gets defined twice but it makes it easier to know where to look for things and you can delegate issues easier. “You take care of the positioning issues and you correct the styling issues

    Carsten Rose Lundberg

    Jan 19, 04:39 AM #

  17. I agree with Nathan Smith , I use shorthand css now that I am comfortable with it, but if I just want to alter one dimension I’ll put that long-hand as well: margin:0; margin-right:1em; etc.

    It has to go straight after otherwise it may get missed when debugging or altering at a later date. This combines the best of both worlds.

    Richard Kendall

    Jan 19, 04:44 AM #

  18. This page is a great place to start for a neutralising stylesheet you call/import before applying any other styles. Also explains why you shouldn’t use the wildcard whitespace stripping rule mentioned above by Chris R (can be more trouble than it’s worth on forms etc…)

    Here

    I do use all the above, but also separate my CSS into four/five stylesheets (initial / layout / typography / navigation/ Content Styles and then for forms and tables as well (when needed).

    Check out content with style for tips on this

    BTW, any chance you can increase the text size in this form, and/or increase it’s size? It’s a little on the small size for writing comments. Cheers!

    Andy Beeching

    Jan 19, 04:52 AM #

  19. With 20 programming languages, 4 markup languages, 3 spoken languages, plus piano and the ancient board game Go all stuck inside my skull, you expect me to remember the order of CSS shorthand properties, too?

    Sorry, my brain is full. I’ll take explicit coding practices over implicit any day.

    Point #2 is not so happy.

    Dave

    Jan 19, 05:39 AM #

  20. Good article, cheers!

    Dan Bailey

    Jan 19, 05:43 AM #

  21. It’s seem to be great “Combining properties onto a single line”, but not good for parsing style items.
    Frequently I parse user’s stylesheets (on my sites) to make interactive changes.
    Let compare strings
    1) border: 1px solid #808080;
    2) border-width: 1px;
    border-style: solid;
    border-color: #808080;
    In second case strings parsed more fast then in the first case.
    I think, this article usefull, but in specific chance we can use these suggestions.

    Sergey Koksharov

    Jan 19, 06:07 AM #

  22. hm good point, good article Thame,this might be in handy these days :) cheers m8

    Marko Mihelcic

    Jan 19, 06:14 AM #

  23. Good article, thanks a lot for putting all this together.

    Brian Heumann

    Jan 19, 06:40 AM #

  24. Generally some good advice: one point about compacting lines, though : in some cases it may prove harder to read. For margins and background placements, for example, I tend to explicitly write something like

    margin: 0; /* no margins at all */
    margin-left: 2em;
    margin-right: 2em;

    ...as I forget the order in which the margins are applied in the one-line case (I could just remember “clockwise”, but I don’t). Same applies for background positioning:

    background: url(...) no-repeat 45px 72px;

    I almost always have to figure out which pixel value is x and which is y by trial and error.

    Jon Dowland

    Jan 19, 07:03 AM #

  25. i also like grouping simlar rule types on a line

    h3 {
    position:relative; left:-.6em;
    width:100%; height:1%;
    margin-bottom:.3em; padding:.2em 0 .3em 1em;
    text-transform:capitalize; font-size:120%;
    }

    like:
    classification
    dimension
    whitespace
    other
    text
    background
    border

    sparsely

    Jan 19, 08:23 AM #

  26. here’s a tip for you: how about using em’s for font-size instead of pixels?

    michiel

    Jan 19, 08:32 AM #

  27. “Combining properties onto a single line using shorthand properties means that your CSS will be easier to understand and edit.”

    Easier to maintain? Yes. Easier to understand? No.

    Veracon

    Jan 19, 09:37 AM #

  28. Good tips. Thanks for taking the time to write it down.

    Lee

    Jan 19, 09:46 AM #

  29. Sometimes, when I edit, Iremove the HTML to which some styles apply. Can anyone tell me if there is a program that will scan a stylesheet and remove styles that are not used? I’m thinking like an HTML Tidy for “orphan” css.

    james McClelland

    Jan 19, 10:44 AM #

  30. “Combining properties onto a single line using shorthand properties means that your CSS will be easier to understand and edit.”

    Not at all. I find single line attributes much easier to undestand and maintain (does left come before right, does top come before bottom?) I suppose if you live in CSS land then short-cuts are fine. Or if you are Perl lover then you can’t get enough of them. If you are going to maintain stylesheets in group setting – being verbose tends to introduce fewer errors and can be easier to track errors down. Of course there are exceptions to every rule…..

    ChronoFish

    Jan 19, 11:08 AM #

  31. Those are some great tips. Good work!

    Loomy

    Jan 19, 11:19 AM #

  32. Two tips from me:

    1) Break your CSS up into different style sheets. For example, one for layout, one for text, one for forms, one for tables, etc.

    2) Organize your properties alphabetically within each rule. This makes your code easier to read and debug as you always know where to look for a property.

    I wrote about this in a little more detail on my blog – Suggestions for Organizing Complex CSS.

    Christian Watson

    Jan 19, 11:38 AM #

  33. Thanks for the tips. I already use shorthand and like Nathan and a few others, I’ll use the long handed version for tweaking when necessary.

    James Mitchell

    Jan 19, 12:11 PM #

  34. nict tips.. I was planning on getting some type of standard for my css files but never got to it.

    I agree with some of the comments made about coding with standard version and compressing the finished version before deployment.

    nuffGigs

    Jan 19, 12:56 PM #

  35. Another extension of this is thinking about how to organize all of your CSS into multiple files when working with a large site. Then you’ve got alternate stylesheets and media-specific styles and hacks to get around browser irregularities and… maybe I’ll just go back to table-driven layouts. :)

    Jay Ramos

    Jan 19, 01:18 PM #

  36. Very nice. I will definitely use these tips on all the sites I make. I have been trying to make some sense of my huge CSS documents. But as I build sites, they kinda takes off on their own. Using a pre-built structure will be a huge time saver, and sanity saver! Thanks!

    Trams Studio

    Jan 19, 02:55 PM #

  37. Great post! This comes in handy very much for a CSS newbie such as myself. =]

    Rob

    Jan 19, 03:06 PM #

  38. This is an excellent post and hit the nail on the head that organization is still important for a sites successful outcome. Thanks….

    Dennis Bullock

    Jan 19, 03:32 PM #

  39. Fine as a unification of ideas, but you present nothing new.

    Stop Design had an article on the organization aspect last year.

    The rest is just common sense for anyone that knows CSS at all.

    Good tips for newbs.

    Brad

    Jan 19, 04:23 PM #

  40. A good CSS editor (like CSSEdit for OS X) can help organize CSS. CSSEdit, for instance, lets you group styles (it adds valid comments before and after the rules, which it understands as groups), and you can then fold or expand those groups to make editing lengthy files much easier.

    Feaverish

    Jan 19, 04:25 PM #

  41. Hey thats cool! I will definately use them in my upcomming websites. I really hate how CSS files usually get spagetti coded.

    miscblogger

    Jan 19, 06:34 PM #

  42. These are very helpful tips. Thank you.

    Ian Williamson

    Jan 19, 06:40 PM #

  43. I agree that these suggestions are pretty obvious.

    Tip #1 is the only semi-creative tip and I’ve seen it suggested in other, similar articles. Like the community bicycle, it’s been around.

    Tip #2 technically doesn’t make your CSS more organized. It just makes it shorter and, hopefully, more readable. Plus, it’s a basic feature of CSS. Who doesn’t know about short-hand properties?

    If you told a room full of people to organize a group of objects in any way that they desire, I bet that 99% of them would put them into categories. So, if 99% of people, who know nothing of CSS, could come up with the idea of categorization, it’s probably safe to assume that no one needs to include it in a list of ways to organize CSS.

    Tip #4 is a basic tenant of CSS design. If you’ve read anything about CSS, you should know about this.

    A better solution to tip #5 would be to use a CSS editor that can collapse your styles into a single line and expand them when you want to edit. Why run it through a “compressor?”

    Cully

    Jan 19, 09:22 PM #

  44. Thanks for this article, very good tips!

    Some time ago I tried to put together some ideas, suggesting more predictable CSS. There I tend to be on the opposite opinion on the use of shorthands, but it really is a qustion of preference.

    To me, the most important thing is consistency. I think whatever organization policy a team chooses, everyone should just stick to it. This way when the moment comes to change something, you know where to find it.

    Again, very good article, I particlulary liked tip #1. Thanks for sharing!

    Stoyan

    Jan 20, 09:19 AM #

  45. Great article!

    I personally have problems with OpenSource backend software like Gallery, that contain CSS defined layouts and the programmer has written his sheet, repeating the same rule over and over for different attributes. It takes me about 5 hours just to get it all together again.

    Thanks for spreading the knowledge.

    John Bilotta Jr

    Jan 20, 01:36 PM #

  46. Thanks to everyone for your nice words, additional tips, and constructive criticism.

    Thame

    Jan 20, 11:34 PM #

  47. Thanks for this nice article!

    Can I translate this in german and use it on my site?
    I would like to show this my classmates.

    Sven

    Jan 21, 06:49 AM #

  48. Help is defined by the recipient, as Peter Drucker said. I found this a useful and clear article. Thanks for that.

    One extra tip might be to use classes more. You can apply multiple classes to say a div. So if you define
    .right {float:right;}
    and
    .italic {font-style:italic;}
    then just using
    < div class = " right italic " > (spaces added to show here)
    gives you a right floating div where the text is in italic. The advantage is that you combine whichever of these basic classes you want. I’ve found this also helps me to keep my div structure clearer.

    Barry Welford

    Jan 21, 12:54 PM #

  49. Nice article, I guess some of these tips will be very useful for my own web site! Thx

    Refik

    Jan 21, 06:34 PM #

  50. Thanks everyone,

    Barry: Yes, multiple classes can be very helpful and I’ve seen a technique at my job that uses this. When replacing text with images using the text-indent method, it can be helpful to create a “replaced” class that includes only the text-indent and a different class for the background image. This way, it is easier to see which headline is actually being replaced and which is simply being styled otherwise.

    Thame

    Jan 21, 11:50 PM #

  51. Great article, and some great suggestions from the comments. You have been blogged at www.thewebdesignblog.com

    Cheyne

    Jan 22, 06:28 AM #

  52. Awesome article. Will definitely keep these rules in mind for my next redesign.

    Nina

    Jan 22, 09:31 PM #

  53. Thanks to both of you.

    Thame

    Jan 23, 11:02 PM #

  54. comments on tips #1 :
    too much indenting will definetely increase the file size. not a very good idea.

    Rizky

    Jan 24, 02:59 AM #

  55. Personally, I like to have the closing brace on its own line. There are two advantages. The first is that it more clearly defines the scope of the class. It is visually easier to see the opening and closing brace. The second is that it makes it easier to add a line. One does not need to find the closing brace, place the cursor, press Enter, then type in the new code, they can simply open a line above the closing brace and go.

    Bottom line is that one should use whatever they have a comfort with and works for them. By having ANY system in place, modification becomes much easier.

    Good article.

    George L Smyth

    Jan 24, 04:45 PM #

  56. “Combining properties onto a single line using shorthand properties means that your CSS will be easier to understand and edit.”

    Sorry, I don’t agree. Having each element defined spells it out, therefore easier to understand. Also what happens if I write this:
    border :1px solid #000066;

    then want to make the bottom margin black? I think that if you want more flexibility then write it out in full, it’s good practice and also makes it easier to understand for people learning the art.

    Mark C

    Jan 26, 10:21 AM #

  57. Very good tips!

    Ivan Minic

    Jan 28, 10:26 AM #

  58. And always remember to define the background-color of your pages. For example, this page needs a background-color: #fff;

    Vincent J. Murphy

    Feb 17, 11:56 AM #

  59. Hmm, or not. Still hard to read, though. :)

    Vincent J. Murphy

    Feb 17, 11:58 AM #

  60. I didn’t set a body background color because if a user has gone through the trouble of defining a default color for their user stylesheet, they probably had a good reason for it.

    Also, I had a visitor contact me because they could not see the text because of their high-contrast scheme and my forced background color.

    Can you tell me what part is hard to read for you and what you’re running so that I can fix it?

    Thame

    Feb 17, 01:49 PM #

  61. Web designers can get some good ideas from programmers about how they are organizing even more complex code:

    http://www.developer.com/java/other/article.php/600581

    etc

    sandijs aploks

    Apr 6, 04:26 AM #

  62. Brilliant! Love this article!

    Marius Akerbæk

    Jun 2, 06:52 PM #

  63. Wow, I’m glad you enjoyed it.

    Hopefully I’ll be posting some more CSS/design related stuff soon so stay tuned.

    Thame

    Jun 3, 10:19 PM #

  64. sound advice – really liked #1 ~ why have i not thought of this for myself.

    david foster

    Jul 26, 04:10 AM #

  65. Well written article but CSS creates problems with Firefox. What could be a solution

    Dassnagar Infosystems

    Jul 27, 03:49 PM #

  66. David: Don’t thank me, thank Rundle. The man’s a genius :)

    Dassnagar: Really? I find that most of my CSS problems come with IE. Firefox is almost always fine.

    Thame

    Jul 29, 06:27 PM #

  67. I feel that making two style sheets and using them separately helps to remove confict of browser.

    Website Design India

    Jul 31, 07:40 AM #

  68. I think CSS is really a powerful tool

    I was lookin for some quality information….and this website is an ultimate source for designers needs

    .........

    Web design| web site design company | SEO services in India

    Aug 5, 02:21 AM #

  69. Yes of course that CSS is so powerfull and really usefull stuff. If you want i could give you some urls containg stuff about css – like this blog – which’s really good

    Praca

    Aug 12, 07:33 AM #

  70. I’m glad I could help :)

    Thame

    Aug 12, 01:52 PM #

  71. We have had great sucess using CSS in our website

    peter

    Sep 7, 06:21 PM #

  72. Someone else below asked this already.
    I am getting nailed with Spam in my guestbook for our catalog website. Is there anyway to stop this?

    If not, there really isn’t any point in leaving it up and active. Any help will be greatly

    appreciated.

    Thanks

    katalog

    Sep 27, 06:05 AM #

  73. A helpful aricle: Good tips and incitations.
    Thanks!

    Volker

    Oct 5, 05:24 PM #

  74. Thanks alot for sharing this information.

    regards, Jonas

    Webkatalog

    Oct 26, 08:25 AM #

  75. Nice article. Many of us needs some rules to code better.

    Andy

    Nov 15, 06:36 PM #

  76. A lot of perfect tips: Especially for newbies.
    Thank you!

    Robert

    Nov 20, 05:48 PM #

  77. i love CSS because it´s easy if you know how to do it. it took me some time to understand it but now i love it. really good tips inside. and i also learned some new stuff.

    greets thomas

    Heizung Energie solar

    Nov 26, 08:43 AM #

  78. CSS is important, it’s can make the web page looks clean.
    thank you for sharing with us.

    John

    Nov 29, 08:00 AM #

  79. Nice article, I think CSS is really a powerful tool

    BUses

    Dec 4, 08:51 PM #

  80. sound advice – really liked #1 ~ why have i not thought of this for myself.

    Logodesign

    Dec 4, 11:20 PM #

  81. I was lookin for some quality information….and this website is an ultimate source for designers needs

    Skateboard

    Dec 5, 09:52 PM #

  82. the tips helps me get an overview in my code.. thx!

    Mark

    Dec 9, 10:33 PM #

  83. A quite intresting idea is realized in this website! And a good and easy to handle design has been found too!

    Onlineshops

    Dec 10, 09:47 AM #

  84. Absolutely great information – thanks for posting!

    kemi

    Dec 12, 04:54 PM #

  85. Thank you for the code.
    Kevin

    Kevin

    Dec 14, 03:21 AM #

  86. I feel that making two style sheets and using them separately helps to remove confict of browser. ranking and pagerank

    ranking

    Dec 15, 01:17 PM #

  87. This is a wonderful, insightful and uplifting case of a revealing infrastructure implementation of Open-Source & Free Software. Keep up these useful pieces. Your help would be appreciated.

    BUses

    Dec 15, 07:58 PM #

  88. Wow. Very impressive.

    Supreme concept of a personalized web portal.

    I look forward to using this as my browsers’ start page.

    Keep up the good work!

    Onlineshops

    Dec 15, 09:31 PM #

  89. A constructive article and the answer of many questions about CSS.
    Thanks!

    Motorrad

    Dec 19, 08:47 PM #

  90. First-class quality informations.
    TXL!

    Julie

    Dec 20, 08:42 AM #

  91. Great Site, Thank You

    Ersatzbezug, Sitzbezug

    Dec 21, 07:18 PM #

  92. Very good and great site with very good look and perfect information…i like it

    Onlineshops

    Dec 22, 01:15 PM #

  93. Absolutely great information – thanks for posting!

    Gartenfackel

    Dec 23, 01:29 AM #

  94. nice tips!

    Księgowy

    Dec 24, 10:17 AM #

  95. Great tips. I did have problems reading my code. Looks like now I can make it easier.

    Zoffix Znet

    Dec 26, 03:24 AM #

  96. Really well explained. Thank u 4 your time to make that, it really helps me out. BTW sorry 4 my bad english, its a little bit rusty (im from germany)

    Dan

    Dec 26, 08:42 AM #

  97. greeeeaaat! thats what i´ve looking for!
    thank you very much for sharing this.

    Andreas

    Dec 27, 07:48 AM #

  98. Happy New Year 2007 !!!!

    Jessi

    Jan 1, 10:15 AM #

  99. Hi, I wish you and all the visitors here all the best for 2007. Go on doing great work ;-)

    Brautmode

    Jan 1, 05:56 PM #

  100. i wish u all a happy new year!

    great tipps thank you for sharing it. please more of it!

    Brigitte

    Jan 2, 08:14 AM #

  101. I hate indents.

    Angel

    Jan 2, 07:08 PM #

  102. Happy new year!

    John

    Jan 2, 08:23 PM #

  103. superb tips – Keep up the good work.

    Alice Buses

    Jan 4, 09:43 PM #

  104. margin:5px 0 4px 10px;

    Is much more efficient than:

    margin-top:5px;
    margin-right:0;
    margin-bottom:4px;
    margin-left:10px;

    i be used to the back usage,
    try it .margin:5px 0 4px 10px;

    程控交换机

    Jan 10, 04:09 AM #

  105. It´s very interesting

    Rezepte

    Jan 18, 05:54 PM #

  106. k if we`r at shorten CSS-Code than lets use

    border: 1px solid #000000;

    instead of:

    border-width: 1px;
    border-style: solid;
    border-color: #000000;

    but … its great, well done!

    Michael

    Jan 20, 02:09 PM #

  107. Very good tips!

    Stern Wintergarten

    Jan 22, 10:42 AM #

  108. Fantastic article covering some points I really needed some good usability info for.
    Best regards from Poland

    Tanie linie lotnicze

    Jan 25, 07:58 AM #

  109. Wow thats amazing the CSS-thing.
    i think i will make my next projects just with html and css.
    thank u very much for sharing your tips

    handy billig kaufen

    Jan 26, 10:16 AM #

  110. Its all right

    Tworzenie Stron

    Jan 28, 03:58 PM #

  111. nice article, thank you!

    Webkatalog

    Jan 28, 06:26 PM #

  112. Enjoyed browsing through the site. Keep up the good work. Greetings nad thanks from Poland

    Meble

    Feb 2, 03:54 AM #

  113. Great and excellent article t’s realy helpful. Thanks again. I will visit it again

    Luxus Haengematten

    Feb 3, 01:50 AM #

  114. yes its my opinion too, really excellent articles here. keep on the good work.

    newsartikel

    Feb 4, 10:38 AM #

  115. Very great article!

    Japan Tuning Spoiler

    Feb 6, 12:43 PM #

  116. Enjoyed browsing through the site. Keep up the good work. Thanks and Greetings

    Aukcje

    Feb 7, 11:57 AM #

  117. Very interesting article

    Kosmetik

    Feb 13, 04:07 PM #

  118. i`m impressed, u defenitly know what u write about. good work.

    Kredit Darlehen

    Feb 21, 05:04 AM #

  119. very great site!

    Suchmaschinenoptimierung

    Feb 21, 12:09 PM #

  120. I really like this website.

    Verzeichnis

    Feb 22, 07:58 AM #

  121. Nice blog, visit my site

    Luxus

    Feb 22, 04:29 PM #

  122. great written, i like your style. many many usefull informations about css and thats what we really must have. thank you!

    Nachrichten

    Feb 23, 05:25 AM #

  123. yeah! great article, just bookmarked under a delicious css-tag

    Vorwahlen

    Mar 2, 09:50 AM #

  124. Great and interesting website!

    dvd kochschule

    Mar 10, 10:35 AM #

  125. perfect page and stuff. i like it really.

    LR

    Mar 10, 12:45 PM #

  126. really good intentions and informations that helped me out, thank u 4 that!

    Dan de Mon

    Mar 11, 06:24 AM #

  127. Fantastic article covering some points I really needed some good usability info for.

    bannery reklamowe flash

    Mar 11, 05:10 PM #

  128. Nice work. Please keep them coming.

    Pink

    Mar 31, 04:01 PM #

  129. I suppose if you live in CSS land then short-cuts are fine. Or if you are Perl lover then you can’t get enough of them.

    Sztuka

    Apr 15, 01:02 PM #

  130. Absolutely great information – thanks for posting!

    Schmuck

    Apr 19, 04:46 PM #

  131. thanks good job

    ogrod

    May 3, 03:46 PM #

  132. Great and excellent article t’s realy helpful. Thanks again.

    Regenbekleidung

    May 3, 06:32 PM #

  133. Nice find! It’s amazing that I didn’t stumble on this little post until over a year later, though. How on earth did this escape me? Anyhow, keep ‘em comin’! :)

    Biurka

    May 4, 11:11 AM #

  134. Very Cool. I’ve listened to the radio show before but wasn’t aware of the history. Deborah sounds like a cool chick

    Katalog

    May 5, 03:33 AM #

  135. great .. Nice tips and informative.. Thanks

    software engineering

    May 5, 03:57 AM #

  136. Since I use strictly css style, my rankings are pretty good… thanks for the tip!

    Afro Clubs

    May 7, 04:07 PM #

  137. Thanks ;)

    i find link for this blog in smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding ;)

    Redirect

    May 10, 10:10 AM #

  138. Theme very interesting.

    Bielizna

    May 10, 11:17 AM #

  139. Wery good idea.
    Thanks!
    Best regards.
    George

    George

    May 10, 02:11 PM #

  140. Good article – thanks for all the hard facts and putting all together! M7

    ChrisM7

    May 10, 02:36 PM #

  141. i dont understand:

    margin:5px 0 4px 10px;

    Is much more efficient than:

    margin-top:5px;
    margin-right:0;
    margin-bottom:4px;
    margin-left:10px;” whats difrents?
    its this same, mayby short nothing else?

    proxy

    May 18, 09:27 AM #

  142. Optimise or organise? perhaps the best of both worlds..Your website is a great learning tool and certainly an excellent reference to have on hand thank’s.

    Skrypty CSS

    May 20, 06:06 PM #

  143. Great and excellent article t’s realy helpful. Thanks again.
    Wow. Very impressive.

    Tapeten

    May 21, 06:13 PM #

  144. Very good tips, but hard to understand. Good luck

    Wnętrz

    May 22, 04:14 PM #

  145. 1000 thx for this helpful post

    Freiberufler

    May 27, 04:32 PM #

  146. Thanks for the Tip, your website is a very good learning tool.

    Piercing

    May 29, 08:47 AM #

  147. Very great and excellent article. It’s realy helpful. Thanks again.

    Wettforum Wettpoint Sport Wetten

    May 29, 10:53 AM #

  148. Theme very interesting.

    Ryan Willimasson

    May 29, 12:37 PM #

  149. Enjoyed browsing through the site. Keep up the good work. Thanks and Greetings

    Das Telefonsex Portal

    May 31, 02:41 PM #

  150. I love it! Nice tips.
    thx

    Blumen

    Jun 1, 04:47 PM #

  151. Thanks, i was desperately looking for that info!, great article covering some points I really needed, some good usability info for.

    Partnersuche

    Jun 5, 09:36 PM #

  152. Thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. So please keep up the great work. Greetings

    Euro 2012

    Jun 6, 08:02 AM #

  153. Nice article!
    It’s a shame I only ran into it today.
    Dugg it…

    Johan

    Jun 28, 01:31 PM #

  154. I suppose if you live in CSS land then short-cuts are fine. Or if you are Perl lover then you can’t get enough of them. Thanks for article

    Maid

    Jul 15, 05:00 PM #

  155. Why would you write an article about CSS if you don’t know about it? #1 – H2 default is bold so it’s pointless to put it in your declaration, #2 – the idea behin CSS is to minimize redundancy… not to repeat an identical font declaration for each H2 #3 – the name of your id/class should represent what it is and not where it is located in the design like: “main_side.” And if you want to be nit picky, font should not be declared with px since it won’t resize in IE… A better code with identical result would be:

    h2 { font: .7em/1.5em verdana, sans-serif; }

    #snapshot_box h2 { padding-bottom: 6px; }

    #main_side h2 { color: #444; }

    .sidetagselection h2 { color: #fff; }

    As a side note, I think indenting CSS the way it’s done in that example is a bad suggestion since the H2 in the HTML will be inside the element with id=“snapshot_box” so in HTML you have this hierarchy

    -snapshot_box
    ——H2
    and in CSS you have the oposite

    -H2
    ——snapshot_box

    Yann

    Aug 2, 10:43 PM #

  156. hey! your article is great. thanks

    kalendarze

    Sep 11, 02:02 AM #

  157. Nice article!

    Dugg it…

    旅遊包車

    Sep 11, 03:15 AM #

  158. Thanks for this article. I like your posts

    meble biurowe

    Sep 11, 04:57 AM #

  159. But how do you indent the children of a selector that shares a rule with another selector?
    For instance:

    #nav, #sidebar{font-family:arial, “lucida console”, sans-serif; color:#777;}

    I suppose you could put both the #nav and the #sidebar children indented underneath it…in alphabetical order.

    Jeremy

    Sep 13, 10:14 AM #

  160. Thanks for the good article (and the follow-ups)! This gave many good ideas for better structuring CSS.

    Ville

    Sep 24, 10:05 PM #

  161. I also have a list of the CSS standards always use. Complicated but it is cross-browser descriptions. And some CMS don´t accept any description as background images such as “background-position: 0 2 0 5”, as an example.

    Daniel

    Feb 17, 11:34 AM #

  162. Very interesting article.

    LR

    Mar 15, 03:00 PM #

  163. Thanks for this very good article. I use this to my home work to school. Can I translate this with all comments and insert on my site? Thanks

    Opony

    Mar 18, 07:09 AM #

  164. Great article. In fact, I liked it so much that it inspired me to change my dreamweaver 8 configuration. I added it to the starter css files located here: C:\Program Files\Macromedia\Dreamweaver 8\Configuration\BuiltIn\css This starter css file will actually be useful! Thanks for the inspiration.

    jhewitt

    Mar 28, 09:43 AM #

  165. Very interesing article. Thanks for the article! As a full time developer, this information is exceedingly useful to me.
    As a full time developer, this information is exceedingly useful to me.

    Przepisy kulinarne

    Jun 6, 12:22 PM #

  166. I agree with all points but on a side note be careful with short hand for fonts.
    font: bolder 75%/1.2 arial, sans-serif;
    can render differently in some browsers.

    Otherwise I use shorthand.

    cooper.semantics

    Aug 18, 08:13 PM #

  167. It´s a pity, I try to learn how to handel CSS, it seems to be easy. But I still my problems with that coding language…

    Colostrum

    Sep 8, 02:30 AM #

  168. Thanks man,
    I’ve been putting websites together for almost ten years now and knew about SOME shorthand. But that you can cut background IMAGE definition short into a one-liner was completely new to me.
    Wait, let me bookmark this…

    Thanks

    tommy

    Feb 25, 12:52 AM #

  169. Found this tool on reddit that tabifies the selectors for you automatically – styleneat.com. Works nice, but it reshuffles all my selectors which isn’t too good idea, but it still doesn’t break anything though. I’ve emailed them, hope they improve it soon.

    Prakash Mehra

    Mar 23, 01:50 AM #

  170. I agree and use all the tips here.

    I would like to add that another important thing regrading css stylesheets is to use the most meaningful elements to describe your content and use semantic class and ID attribute values in order to create the strongest DOM possible and to help with maintenance and redesigns.

    web design mures

    Apr 11, 12:30 PM #

  171. Nice Article over css styles. I will think about it in my next design works. I´also like the yaml framework on css.

    Best Greetings

    LR Colostrum

    May 7, 07:55 AM #

  172. I organize my CSS similarly but there are always a few exceptions that can’t be groupsed. :) Anyway, that’s a great post! Thank you!

    Paul

    Oct 8, 08:33 AM #

  173. I organize my CSS similarly but there are always a few exceptions that can’t be groupsed. :) Anyway, that’s a great post! Thank you!

    Medyum

    May 24, 04:31 AM #

  174. You have spelling errors;
    “as will as a separator format you can notice easily.”
    should be “as well as…”

    Isaiah Scruggs

    Mar 24, 06:28 PM #

  175. I find organizing my code in that way repetitive and difficult to navigate. For example, having a section for text styles usually means that you will be repeating an element at least twice in the document, once for structure and again for text styles. I prefer to break my sections out according to the structure of my site – with all general/common elements defined at the top (header, type, footer, layout), then sections like Homepage, Blog, Single Post, etc. with each of those sections containing only elements that are exclusive to those site areas. This means that I’ll generally only have an element defined once in the document, and I won’t have to scroll elsewhere to find other rules associated with it.

    John Natoli

    Nov 14, 02:47 PM #

  176. Thanks Thame for this helpful stuff, I will use it for optimizing my web project (Blumenversand).

    Actually your entire blog is quite cool – some posts are far to complex but I like your way of writing.

    Keep on writing ;-)

    Daniel

    Aug 30, 05:47 PM #

  177. I needed to thank you for this wonderful read!! I certainly loved every bit of it. I have you bookmarked to check out new stuff you post.

    Amandeep

    Feb 14, 04:41 AM #

Add a Comment

Phrase modifiers:

_emphasis_
*strong*
__italic__
**bold**
??citation??
-deleted text-
@code@

Block modifiers:

bq. Blockquote
p. Paragraph

Links:

"linktext":http://example.com


Show Articles By:

You can show articles by time or category.

  • 260.

    Conscious Conversation: Behavioral Science

    Dr. Eran Zaidel is a professor of Behavioral Neuroscience and faculty member at the Brain Research Institute at UCLA. His work focuses on hemispheric specialization and interhemispheric interaction...

    Read More

  • 260.

    Progress Report

    Two years down, I’m still going. The next two years are my clinical rotations, the actual hands-on training. It’s a scary prospect, responsibilities and such; but it’s equally exciting, after...

    Read More

  • 260.

    Why Medical School Should Be Free

    There’s a lot of really great doctors out there, but unfortunately, there’s also some bad ones. That’s a problem we don’t need to have, and I think it’s caused by some problems with the...

    Read More

  • 260.

    The Cerebellum: a model for learning in the brain

    I know, it’s been a while. Busy is no excuse though, as it is becoming clear that writing for erraticwisdom was an important part of exercising certain parts of my brain that I have neglected...

    Read More

  • 260.

    Conscious Conversation: Philosophy

    Daniel Black, author of Erectlocution, was kind enough to chat with me one day and we had a great discussion – have a listen.

    Read More

  • 260.

    The Stuff in Between

    I’m actually almost normal when not agonizing over robot production details, and quite a bit has happened since I last wrote an update. First, I’ve finally graduated. I had a bit of a...

    Read More

  • 260.

    The Ethics of AI: Part Three

    Is it ethical (or possible) to constrain intelligent life? This part of the argument involves what we think it means to be human, and whether creating and adjusting those criteria in an AI affects...

    Read More

  • 260.

    The Ethics of AI: Part Two

    Is it ethical to allow humanity to continue, or to replace our species with machines? This is getting tougher. Why does humanity deserve to exist? The recorded history of the experiences of Homo...

    Read More