March 26th, 2007 - by Paul OB

As with most things, a logical and structured approach is the best way to go. Therefore I have put together 10 quick tips (in no special order) to help make your CSS coding as pain-free as possible.

1. Keep it Simple

This may sound obvious but if you find yourself using complicated coding to achieve your design then you should think again about whether the feature you need is really necessary or if you’re just thinking about your design and not your visitors. Too often designers get caught up in their own design and go to great lengths to produce a certain visual effect only to find later on that visitors find it either irritating or unusable.

Complex code is usually the result of muddled thinking. Plan your layout logically and work from the outside in and from the top down where possible. Look at what containers you will need and break jobs down into smaller parcels. I usually start with a page wrapper and then progress logically through the header, navigation, main content and footers etc trying to preserve the flow of the document as much as possible.

While good visual design is necessary to attract visitors you must still have good content and a usable and accessible site. If you find your html and css looks like spaghetti then have a re-think and see if you can simplify it. This will make it easier to maintain in the future and will often save code and bandwidth.

2. Don’t use hacks unless its a known and documented bug

This is an important point as I too often see hacks employed to fix things that aren’t really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with.

If you find its a known bug then 99% of the time there will be a known solution to this bug and you can safely use a hack if required knowing that you are fixing a bug and not just correcting bad coding.

I couldn’t count the number of times I’ve seen layouts using hacks when all that was needed was to control the default margins on the page (see next tip).

3. Take care of margins and padding on all elements that you use

All browsers apply default padding and margins to most elements and the amount they apply varies quite substantially. Therefore you need to explicitly control the padding and margins on all the elements you use.

This is covered in depth in this article “No Margin For Error”.

4. Avoid using too much absolute positioning

Most novices to CSS quickly latch on to absolute positioning because it is pretty straight-forward and does what it says on the box. However absolute layouts have a number of problems and the biggest problem of all is that absolute elements are removed from the flow.

This means that when you absolutely place an element then it has total disregard to whatever else is on your page. It will overlap whatever was in that position and will take no notice of other content at all. The result of too much absolute positioning is that you end up having to control everything with absolute positioning and makes for a very rigid and inflexible layout.

The most common problem encountered when using absolute positioning for two or three columns is “How to put a footer at the bottom of all three columns?” The answer is you can’t, unless you resort to scripting or use a fixed height for all three columns.

Instead you should look into using mostly static positioning, margins and floats to maintain the flow of the layout. Static positioning is the default and basically means no positioning at all and the elements just take up space in the normal flow of the document. If elements flow normally then they have a logical construction and one element follows another without having to position it at all. You can use margins to nudge elements into position or use floats when you want elements aligned horizontally.

5. Avoid “divitus”

Although “divitus” isn’t a real word it is now commonly used to refer to layouts that have too many divs and not enough semantic html. Semantic html means using the correct html element for the task in hand and not just using divs for everything. Divs are generic dividers of page content and nothing else. 99% of the time there will be an html tag perfect for the job in hand.

e.g. p,h1,h2,h3,h4,h5,h6,ul,ol,dl etc…

Use divs to divide the page into logical sections or when there is no better alternative. If your page is logically divided into sections that use id’s to identify each section then this will allow you to target inner elements in that section without having to over-use classes on each element

e.g. #top-section h1 {color:red}(see next tip on “classitus”).

A common misuse of divs can be found in the following example:

  1. <div id="header">
  2.   <div class="bold">Heading</div>
  3. </div>
  4. <div id="subheader">
  5.  <div class="bold">Sub Heading</div>
  6. </div>
  7. <div>This is the content</div>

A lot of times the above code can simply be reduced to this:

  1. <h1>Heading</h1>
  2. <h2>Sub Heading</h2>
  3. <p>This is the content</p>

As you can see, by using the correct html to describe the content you give your layout inherent structure and meaning without any extra effort.

6. Avoid “Classitus”

“Classitus” is another made up word similar to “divitus” (as explained above) and refers to the over-use of classes (or id’s) when in fact none are necessary. If your page is logically divided then you can target many specific elements without the need for millions of classes.

A common example of misuse of classes is shown below:

  1. a.link{color:red;text-decoration:none}
  1. <ul>
  2.   <li><a class="link" href="#">Link1</a></li>
  3.   <li><a class="link" href="#">Link2</a></li>
  4.   <li><a class="link" href="#">Link3</a></li>
  5.   <li><a class="link" href="#">Link4</a></li>
  6.   <li><a class="link" href="#">Link5</a></li>
  7.   <li><a class="link" href="#">Link6</a></li>
  8. </ul>

All the links have been given a class of .link in order to style them and is completely unnecessary. If we apply an ID or class to the UL instead, we can target all the anchors within that ul without having to add any extra classes at all.

  1. #nav a {color:red;text-decoration:none}
  1. <ul id="nav">
  2. <li><a href="#">Link1</a></li>
  3. <li><a href="#">Link2</a></li>
  4. <li><a href="#">Link3</a></li>
  5. <li><a href="#">Link4</a></li>
  6. <li><a href="#">Link5</a></li>
  7. <li><a href="#">Link6</a></li>
  8. </ul>

As you can see we get the same effect and save considerably on mark-up and readability. A lot of times the ul may be unique in a section anyway and you can use the parent id without even having to add an id to the ul. (Remember that id’s are unique and can only be used once per page.)

7. Validate your code

Visit the validator at every opportunity and validate your css and html especially when learning something new. If you are new to html/css then validate regularly during development so that you can be sure the code you are using is correct; that will allow you to concentrate on getting the design right.

Do not wait until you have finished coding the design as you may be using features that are not appropriate and will result in a lot more work than necessary. Validating frequently will also catch simple errors like typos which will always creep into the code when you are not looking.

8. Rationalize your code

At every stage during development ask yourself whether you need that extra div wrapper or not. Can existing elements be utilised for background images without adding extraneous code?

Thinking ahead and planning your layout beforehand will often lead to more concise code and an easier-to-manage layout.

9. Flexibility

Remember that a web page isn’t the same as a printed page and that ultimately the user has more control over how your page will appear than you do. With this in mind try to allow for some flexibility in your design so that things like text resizing issues don’t break your layout. Don’t make everything a fixed height/width or at least use ems to allow the layout to expand when text is resized.

With a little thought and patience you can still make your page look good and satisfy accessibility requirements.

10. Browser support

A designer’s lot is often not a happy one due to the variance in the display offered via various browsers. There is no easy answer to this question (apart from the tips already given) and my method of working is as follows.

First of all decide with your client (or yourself) what browsers you are aiming to support. This will of course be based on many factors (which we won’t go into here) but could be as simple as checking your server stats to see who your visitors are.

Once you have decided what browsers to support then make sure that you have access to these browsers in some way. The easiest way is to download the browser you need so you can test locally.

If you can’t download the browsers for one reason or another or you need to test on another platform, then there are a number of sites that will offer remote access or screenshots. Some of these require payment and some of the simpler ones are free (a quick look on Google will soon sort you out).

Once you have decided what browsers to support it is time to start coding then you must check your design at every stage in the browsers that you want to support. This means writing a line of code then firing up at least 3 or 4 browsers to check. As you get more experienced you will soon learn what is likely to work and what doesn’t and you can check less frequently.

If you take this approach of checking at every stage then you will soon find out what works and what doesn’t and identify problems straight away and determine the cause is immediately. This would not be the case if you waited until you had finished and then checked the design. It could take hours (or days) to identify where the problem is and what is causing it. It may in fact be too late to fix it because you have built the whole page on a function that only works in one browser and you would have to start again from scratch.

By checking as you go you eliminate this problem and quite often a small change in design at each stage will accommodate nearly all the browsers you need to support without needing to hack. You can’t make these small tweaks and changes in design if you wait until the end.

The above tips for css coding aren’t in any special order and most are just plain common sense. If you follow the advice given you will make your web design life a lot easier and less stressful.

Did you like this article? If so then subscribe to Search-This and get more articles like this one delivered to your door… or feed-reader! The link below allows you to subscribe – you can even subscribe via email! So what are you waiting for?

Be Sociable, Share!

163 Responses to “10 Quick Tips for an Easier CSS Life”

1 Golgotha

I think some of my earlier websites were guilty of all of the above :)

2 Antti Heinonen - Wordpress

[...] Css: http://cssvault.com/ http://www.csszengarden.com/ 10 quick tips for CSS  [...]

3 John

I always thought it was spelt ‘divitis’. ;)

[...] 10 CSS Tips to Make Your Life Easier 10 CSS Tips to Make Your Life Easier This article shares 10 CSS tips to help make your web development life easier.[news] [technology] [tips] [programming] [...]

5 bla

This wasnt helpful at all,

I’m having CSS woes right now :(

6 dstryr

at my work we call it Irritable Div Syndrome

[...] 10 CSS Tips to Make Your Life Easier Filed under: Uncategorized — recar @ 5:29 am 10 CSS Tips to Make Your Life Easier This article shares 10 CSS tips to help make your web development life easier.[programming] [news] [technology] [tips] [...]

8 CSS Tips to Make Your Life Easier

[...] While boredom-digg’ing I ran across “10 CSS tips to help make your web development life easier”. Lots of good stuff in here for the would-be site designer (and the experienced one as well).read more | digg story [...]

9 John Pozadzides

Just as an FYI, I find our validator over at HTMLHelp.com often makes validation a bit easier than the W3C validator. Same thing applies to CSS with our CSS Check.

Both of these tools were written by resident uber-Genius Liam Quinn and the error messages are less cryptic, and they link to the page within our reference that deals with the specific element – something those of us with more modest talent find invaluable. :-)

Great article by the way.

John

10 Steve James

10 rules to live by, indeed. Wait, yonder… I see CSS3!!! How long will it take to get there?

11 Anonymous Coward

Good advice :)

But re #1, try working with a designer, you end up fulfilling his/hers needs instead of the customers :P

12 merlinvicki

thanks…thanks for the tips…i used to have classes defined at a lot of places I could have just used it once as shown ….I had this one qs….does using “id” validate the html?? like i had this problem whenever I use an id tag it creates validation error..

merlinvicki

13 tech

absolutely true information about css ,
thanks

14 Craig

There is NEVER a time when a “hack” is a viable alternative. A simple look at all the sites that are still broken due to Internet Explorer v7 making null and void one of the most popular of CSS hacks should be enough to show that a hack to correct for bugs is not a good idea as the bug may get fixed.

Also, there are very few “bugs” that can’t be dealt with by rethinking the problem and looking for other elements to apply style to that achieve the same desired effect.

Finally, if one still requires a hack, which in most cases will involve Internet Explorer, applying separate style parameters for IE browsers, using Conditional Comments is a much safer and more reliable method.

In short, if one thinks one needs a hack, think again, literally.

Other than that, excellent tips!!

15 Daniel

Hooray for the millionst “10 Tips for CSS”-blog-entry D: This one belongs to the rather stupid ones

16 Rick

Nice blog entry!

17 Dan Schulz

Paul, you really need to get out of my head one of these days. I was thinking about writing a similar article just the other day…

Anyway, you did a great job on it, and that’s all that matters. :)

18 Terinea Tech Tips

We use CSS but then Joomla inserts tables to our template.

19 ben

“This means that when you absolutely place an element then it has total disregard to whatever else is on your page. It will overlap whatever was in that position and will take no notice of other content at all.”

Not nessecarily. Absolute Positioning an element inside a relatively positioned element will cause it to take its (absolute) position in relation to its (reltively positioned) parent, and therefore
does actually take notice of other content.

Also, the bulk of this article really seems ripped from Zeldmans book.

20 Mr. Div

Divitus is spelled:

Divitus

21 Moany

Tip: Maintain maximum control over your css specificity by drilling down from your body or highest level ID. Also, build test your css across firefox, IE6 & IE7 as your building it. Then test on the other crap browsers as this will make it easier. Piece of piss mate.

22 IndianPad

10 Quick Tips for an Easier CSS Life…

10 Quick Tips for an Easier CSS Life posted at IndianPad.com…

23 eletterspro.com

10 Quick Tips for an Easier CSS Life…

This article shares 10 CSS tips to help make your web development life easier….

24 Paul OB

John – I thought I invented the word myself so I spelt it how I liked :)

Dan – Thanks and sorry if I stole your idea :)

25 Vahij

The article would be easier to read if acronyms were correctly spelled in all uppercase, e.g. “HTML” instead of “html”. Otherwise, good suggestions!

VG

[...] This article shares 10 CSS tips to help make your web development life easier.read more | digg story [...]

27 Drew

Great article. Thanks for the link to Evolt! I’ve been trying to figure out where to get old out dated browsers for compatibility testing.

[...] This article shares 10 CSS tips to help make your web development life easier.read more | digg story [...]

29 Mystech

Document/Comment your more esoteric bits of code… you never know when your predecessor will have to wade through it and try to figure out what the heck you meant. :-)

30 Golgotha

@Steve James: I can’t wait for CSS3 to become the standard either.

divitus – divitis / tomato – tamoto

31 Golgotha

NOTE: For those looking for personal CSS help, you would be well served to try here.

32 Pensador

I should really consider #5 for my blog!

34 live tv online

validation is unnecessary, it helps for some things but maintaining 100% perfect validation proves nothing else but that a webmaster is anal-retentive about their code.

35 Sourav

Great tips….

36 Paul OB

quote “validation is unnecessary, it helps for some things but maintaining 100% perfect validation proves nothing else but that a webmaster is anal-retentive about their code.”

As I mentioned in the article validation is necessary (especially for beginners) to weed out typos and broken code that can cause problems later. I’m not interested in validating just for the sake of it but more in order to make sure there are no mistakes.:)

When you look through 20 or 30 layouts a day fixing problems for other people (as I do on the forums) it soon becomes obvious that if people validated their code they wouldn’t have had needed to ask for help in the first place.

Most of my tips in my article are borne from experience in fixing other peoples broken layouts and I stand by my suggestions.

My html code usually validates first go (apart from typos) so there is not really any extra effort in writing valid code once you know what you are doing.

37 Shycon Design

Good stuff here, especially for beginners. It does take some practice before you can all of these points into consideration. Just a matter of learning as you go along!

38 Andrew

Awesomeness!

39 Golgotha

Thanks for taking the time to comment all. It’s nice to know that we are reaching the people !

40 timoni

A lot of these are useful for small sites, but I challenge anybody to avoid “Classitus” if they’re working on a larger site.

41 Najib

I have to say nowadays with the mac becoming increasingly popular, like a million versions of internet explorer, and the huge upbringing of firefox users, the most annoying thing is checking that a design in CSS works in all browsers. It’s crucial, because sometimes what looks good in Firefox, may look horrible in IE 6 and great in IE7.

I’d avoid using absolute positioning completely!

42 Dan Schulz

It’s easy, really. Use the bare minimum of HTML markup necessary. Try to avoid presentational HTML (including using DIVs for columns) if possible. Sometimes you do need to use a DIV as a container for a floated or positioned element, in which case it would be best to look at the elements contained inside that block and then if necessary assign classes or IDs to the specific elements that need to be styled apart from the norm.

43 cd

6. Avoid “Classitus”

Many many thanks for this tips. Gosh, I have to list many products and every single time need to include “class” to make the item name more identifiable. I tried your trick, and it worked like a charm. Save me so much copy and paste.

thanks again.

44 CSS Tips

[...] 10 quick tips for an easier CSS life. My favorite: don’t use browser hacks unless it’s the last resort. [...]

45 Motherduce: The Blog » links for 2007-03-28

[...] 10 Quick Tips for an Easier CSS Life (tags: css, design, tips) [...]

46 my so-called blog » links for 2007-03-29

[...] 10 Quick Tips for an Easier CSS Life As with most things, a logical and structured approach is the best way to go. Therefore I have put together 10 quick tips (in no special order) to help make your CSS coding as pain-free as possible. (tags: code css design dhtml list tips web2.0 webdesign webdev) similar nonsense in: ill.icio.us |     No Comments » [...]

47 Free CSS Editors : lxpages.com blog

[...] 10 CSS Tips to Make Your Life Easier [...]

48 ArtLung Blog » Daily Links

[...] 10 Quick Tips for an Easier CSS Life (tags: css webdev programming design) [...]

49 David

Thank you very much Paul for this article. I made a translation for the french people http://www.eclaireur.net/tutoriaux/10-conseils-css-pour-vous-simplifier-la-vie/

[...] 10 Quick Tips for an Easier CSS Life (tags: CSS Design Recommendations WebDesign HTML tips) [...]

51 CSS Tips | David Paul Robinson

[...] April 1st, 2007 · No Comments 10 Quick Tips for an Easier CSS Life Stumble it! [...]

52 Blogvaria » 10 Great CSS Tips

[...] read more | digg story Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages. [...]

53 CSS Rewind: Great CSS Articles

[...] 10 Quick Tips for an Easier CSS Life [...]

54 holotone.net

[...] 10 Quick Tips for an Easier CSS Life – As with most things, a logical and structured approach is the best way to go. Therefore I have put together 10 quick tips (in no special order) to help make your CSS coding as pain-free as possible. [...]

56 Best of March 2007 | Smashing Magazine

[...] 10 Quick Tips for an Easier CSS Life As with most things, a logical and structured approach is the best way to go. Therefore I have put together 10 quick tips (in no special order) to help make your CSS coding as pain-free as possible. [...]

[...] are my top 15 Javascript snippits for making great sites that bit extra special.” More…10 CSS Tips to Make Your Life EasierThis article shares 10 CSS tips to help make your web development life [...]

[...] 10 Quick Tips for an Easier CSS Life (tags: css WebDesign tips design tutorial webdev howto) [...]

59 Keyur Shah

A well structured information, thank you.

You have already solved many of my problems before the my work started.

Keyur

[...] has an interesting article on practices to improve your CSS. Visit the site for all the details, but here are the cliff [...]

[...] 10 Quick Tips for an Easier CSS Life [...]

62 Motorcycle Guy

This is an amazing article. That link to get out dated browsers is super handy too!

63 greenzoid

Thanks for the article, i will publish the Turkish translation of this article this weekend.

64 » 25 Code Snippets for Web Designers (Part4)

[...] 10 Tips for an easier CSS Life – As with most things, a logical and structured approach is the best way to go. Therefore I have put together 10 quick tips (in no special order) to help make your CSS coding as pain-free as possible [...]

65 Steve

Quite interesting , practicaly useful to newbies to CSS

[...] 10 Quick Tips for an Easier CSS Life [...]

[...] Keep CSS hacks to a minimum. “Don’t use hacks unless its a known and documented bug. This is an important point as I too often see hacks employed to fix things that aren’t really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with. [10 Quick Tips for an easier CSS life] [...]

68 Jesse Chisholm

Since they are made up words, it doesn’t matter how you choose to spell them.

Some folks may prefer “divitis” and “classitis” because the suffix “-itis” means “inflamation”. So “div-itis” would be “inflamation of the div”, and “class-itis” would be “inflamation of the class”. But they are pronounced “div-eye-tus” and “class-eye-tus” regardless of how they are spelled.

And if you do choose to use the “div” markup, remember that it is inherently a “block” markup. If you don’t want a “block” then use “span” instead.

-Jesse

69 The WebDesign Loft Blog

[...] 10 Quick Tips for an Easier CSS Life [...]

[...] 10 Tips for an easier CSS Life – As with most things, a logical and structured approach is the best way to go. Therefore I have put together 10 quick tips (in no special order) to help make your CSS coding as pain-free as possible [...]

71 dot… » 70 Expert Ideas For Better CSS Coding

[...] Keep CSS hacks to a minimum. “Don’t use hacks unless its a known and documented bug. This is an important point as I too often see hacks employed to fix things that aren’t really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with. [10 Quick Tips for an easier CSS life] [...]

72 myspace animations

If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with. [10 Quick Tips for an easier CSS life]

73 Atlanta Golf Courses

This was helpful! No more CSS woes!

74 TTI:Blog » Keeping CSS Clean

[...] Keep CSS hacks to a minimum. “Don’t use hacks unless its a known and documented bug. This is an important point as I too often see hacks employed to fix things that aren’t really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with. [10 Quick Tips for an easier CSS life] [...]

[...] read more | digg story [...]

[...] is an article over at Search-This that points out a couple of beginner mistakes that are pretty interesting. Here are some highlights [...]

77 Chris Coyier

“Divitus”. I love it. Total beginner syndrome. It is worth noting that using all those divs intead of things like h1 tags isn’t good for search engine optimization.

78 Katalog Stron

Hi
This is an amazing article. That link to get out dated browsers is super handy too!
Thanks

[...] 10 quick tips for an easier CSS life – search-this.com [...]

80 Rahen Mckinny

is class function working with as same as href function?

81 Paul OB

@Rahen – Sorry I don’t quite understand the question. Can you clarify a bit :)

The href attribute specifies a destination address and has nothing in common with a classname which adds styling to the element.

82 Handball

Really interesting article and useful informations! Best regarts from Germany send Handball!

83 Css7.cn » 70 Expert Ideas For Better CSS Coding

[...] Keep CSS hacks to a minimum. “Don’t use hacks unless its a known and documented bug. This is an important point as I too often see hacks employed to fix things that aren’t really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with. [10 Quick Tips for an easier CSS life] [...]

84 Gry Flash

absolutely true information about css ,
thanks

[...] 10 quick tips for an easier CSS life – search-this.com [...]

86 Catering

Great ! I need this :) thanks

87 Berater

I think these blog is really useful for new comers and Excellent resource list.
It´s a very interesting Blog and simple answer of many questions.
Keep up the good work!
Thanks it helps me a lot.

88 Hurtownie

Thanks, great article..

89 Mini Storage

Great ! I need this :) thanks

90 historia

Great article!
Many, many thanks!
Greetings from Poland :)

91 gry flash

True! Well done!

92 Śmieszne filmy

This is an amazing article. That link to get out dated browsers is super handy too! Thank you. This is very goog job.

93 Recipes coctails

Chris. Keep CSS hacks to a minimum. “Don’t use hacks unless its a known and documented bug. This is an important point as I too often see hacks employed to fix things that aren’t really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some researchand try to identify the issue you are having problems with. Chris

94 Mielno

Best article. Good work – congratulations. Happy new year – Mielno.

95 Best of Search-This 2007

[...] 10 Quick Tips for an Easier CSS Life [...]

96 darmowe gry

Happy new year 2008. good job

97 work and travel

This was helpful! No more CSS woes!

98 naturyzm

A lot of these are useful for small sites, but I challenge anybody to avoid “Classitus” if they’re working on a larger site.

99 Paul OB

@naturyzm: “Classitus” is really about adding classes unnecessarily.It doesn’t mean its wrong to add classes when needed even if there are lots of them.:)

If you need something styled differently and you have no specific way to address it (e.g. via context) then adding a class is not a problem but a solution.

Whether the site is large or small makes no difference as the argument is always the same. You just have to ask yourself one question: “Can this element be uniquely targeted without adding extra mark-up and without causing conflicts?”

If the answer is no then a class/id is needed to effect the change.

Classitius is about using unnecessary classes when there is no need. There is nothing wrong with adding classes when they are needed though.

100 elnix

Congratulations, your article is really good.

101 el dorado

I full agree with You.
Regards from Poland

102 Mielno

Happy new year 2008.

103 voip

Very usefull information, thank you.

104 Londynek Ogłoszenia

Hello,
Just as an FYI, I find our validator over at HTMLHelp.com often makes validation a bit easier than the W3C validator. Same thing applies to CSS with our CSS Check.

Both of these tools were written by resident uber-Genius Liam Quinn and the error messages are less cryptic, and they link to the page within our reference that deals with the specific element – something those of us with more modest talent find invaluable.

Great article by the way.

Ogłoszenia Londynek

105 Strony Internetowe

Flexibility… That’s what we’re waiting for. Many thanks!

106 Forum Nasza Klasa

Hi, Thanks for the article, i will publish the Turkish translation of this article this weekend.

107 wesela

Thanks for these informations ! Great job !

108 strony internetowe

Very usefull information, thank you.

109 Praca za granicą

Good article , thx.

110 Galeria sklep

Very nice article. Thanks for taking the time to write it down. Keep up the good work.

111 Dekoracja i prezenty

Very thanks for very interesting article. btw. I really enjoyed reading all of your posts.

112 Paul OB

Thanks for the comments :) :)

113 Qiang

glad i found this site and been enjoying your articles, Paul.

one question regarding the “Classitus”, i have read about the article “Writing Efficient CSS” on mozilla site (http://developer.mozilla.org/en/docs/Writing_Efficient_CSS#Try_to_put_rules_into_the_most_specific_category_you_can.21)

as mentioned in that article: “Avoid the descendant selector!” and it’s argument is performance.

i am wondering what’s your opinon on this?

114 Paul OB

Hi Qiang,

I suppose if you were developing solely for the mozilla platform then you should code in the way that the mozilla authors say is best for their platform.

However CSS isn’t just for mozilla and we already really know that IE interprets its css completely different anyway (e.g.take haslayout as an example which has a greater effect on rendering speed and layout than other issues).

I have yet to see a demonstration of where the universal selector actually slows a page down to a level where a user would notice. I agree with the logic but think that the issue would be lost in the myriad of other influences that affect a web page.

I believe that you should keep your css as short and as succinct as possible and avoid thinks like div#elementame (instead of #elementname) and also avoid long paths using descendant selectors where possible. Usually, these things are a result of poor coding in the first place or because of other stipulations that the author may not be able to control (e.g.themes etc.)

However sometimes there is no choice where you need to target an element more explicitly. Of course you could add an extra class to the element but that won’t work as classes have lower specificity than an ID based descendant selector and you would end up using !important which may cause more problems later.

There is also a case to be made for using ids more carefully and using classes most of the time to avoid such specificity issues.

In the end its always a trade-off between usability, semantics and what’s actually needed to make the thing fly.

I don’t think specifically optimising your css for one browser is the answer but to write better and more efficient CSS from the start.:)

115 dowcipy angielskie

I agree with You Paulo OB.

116 Przewozy Autokarowe

I really learned a lot from your article. Thank you for posting it. Some of these guys are really rough on you, but I’m learning from their comments as well. Thanks again.

117 Paul OB

Thanks :)

I appreciate all comments that are made in good faith whether they agree with me or not and as you say we can all learn something new if we keep an open mind.

118 tanie pozycjonowanie stron

Hi, Thanks for the article, i will publish the Turkish translation of this article this weekend.

119 forum cadilac

absolutely true information about css ,
thanks

120 seocontest2008

Excellent tips, will be of really good use in the future. =)

121 Londynek

Thank you! Very nice and interesting article.

122 london removals

Yes, very interesting article, I have found there something for me, some helpfull informations, really good. Thank you!

123 Monitoring

I’ve been looking for something else:). I’ve found this article by mistake and it’s really useful! Thanks alot!

124 dentysta szczecin

Excellent, good articles

125 kwietniki

so what I can say good work

126 baseny

bravo bravo, very good job

127 Haroun Kola

Thanks

Its always good to get tips for better design

Haroun

128 Alvin Nyau

It took me hours to read and digest this article. But it’s really worth to read especially the part of “dont’t use hackz”.

Nice work dude!

129 Londi

Thank you for the good articles have helped me a lot.

130 Expertsforge

You are right.. Good one. thanks!

131 Naveen P Suthar

Thx… Nice & excellent Article.

132 Gry online

the best article i have ever read

133 Panoramy Sferyczne

Good article , thank You

134 Pawel

Hi, my name is Pawel
validation is unnecessary, it helps for some things but maintaining 100% perfect validation proves nothing else but that a webmaster is anal-retentive about their code.

135 links for 2008-04-10 « Elearning

[...] 10 Quick Tips for an Easier CSS Life (tags: css webdesign) [...]

136 Paul OB

Hi Pawel,

I don’t agree that “validation is unnecessary” as I am constantly seeing silly errors in people’s code when they post on the forums asking for advice.

When you’ve looked through as many sites as I have (over 20,000) you know that validation is necessary to weed out all the silly errors and typos that creep even into the best code.

It also stops beginners from using incorrect css and html at stage 1 before they get into even more difficulty.

I never validate my pages just so that I can put a sticker on the page (which I don’t do) but I validate my page to see what errors are on the page and then make a decision to live with them or not. If the errors are missing div tags or typos then I will fix them.

If the error is because I am using a non standard proprietary css then I can live with that as long as I understand the implications.

Validating your page regularly will keep the code clean of silly errors and allow you to get on quickly with the job in hand.

It’s basically like using a spell checker which will fix your words but doesn’t mean that you can write anything sensible.

Validation for the sake of validation is a different matter but validation for the sake of weeding out silly errors and typos is a must.:)

137 Mielno

God job – Im waiting for next.

138 Części Mazda

Real Good job. Big thanks man :)

139 Bartoszek

good article, thanks you

[...] 10 Tips for an easier CSS Life – As with most things, a logical and structured approach is the best way to go. Therefore I have [...]

141 kabin

I agree with the logic but think that the issue would be lost in the myriad of other influences that affect a web page. this nice page.

142 shopping

The whole different browsers thing really got me when I first started designing. Why oh why did the website work perfectly in every single web browser except IE? Then, when I finally got it to work on IE, it wasn’t happy on the others? Eventually I had to resort to tables rather than listings because the tables seemed to have worked better across all the browsers in making consistency between them all.

143 Tips & Tricks | 4LeafDesigns {CSS}Patch

[...] 10 Quick Tips for an Easier CSS Life by Paul Ob [...]

144 original oil paintings

Thanks for sharing this to us Paul. I copied your list, made some explanation a bit simpler, and shared it to our Web Designers. Now, most of our clients, especially the ones who wanted a little tweak in their site design couldn’t ask for more.

145 San Nayak

This is a real help to people like me who has very low experience in CSS. Thanks…

146 projekty domow

I think these blog is really useful for new comers and Excellent resource list.

147 mobil

Good article , thank You

[...] Keep CSS hacks to a minimum. “Don’t use hacks unless its a known and documented bug. This is an important point as I too often see hacks employed to fix things that aren’t really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with. [10 Quick Tips for an easier CSS life] [...]

[...] common misuse of divs can be found in the following example: PLAIN TEXT [...]

150 ShoppingDeals

I call it Irritable Div Syndrome.

151 Bonunsa

Many many thanks for this tips. A lot of these are useful for my sites,

152 garmin1260t

Yeah, 99% of the time there will be an html tag perfect for the job in hand.

153 GPSDeals

Good article , thank You

154 Rycan

Thank you for the good articles I really learned a lot from your article.

155 70 Expert Ideas For Better CSS Coding « CSS Circle

[...] Keep CSS hacks to a minimum. “Don’t use hacks unless its a known and documented bug. This is an important point as I too often see hacks employed to fix things that aren’t really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with. [10 Quick Tips for an easier CSS life] [...]

156 Website Designer Katy TX

I believe resetting the padding and margin before designing a website is important. It can save a lot of headache with how you website looks in different browsers.

CSS Code =

* {
margin:0;
padding:0;
}

157 AYDIN BOYDAK

Really Good article. Big thanks man

Turkcell kontor

158 yeezynike

so good ,thanks

159 Sylwester w górach

Thats a really nice work thank you verry mutch.

160 Technology Blogged

Another great article :)

161 Hosting Best

Dont use hacks? Why not? As long as it works in the popular browsers… what the problem?

162 it services companies

Well This post remind my old days when i was just started these things as I was new one but now i fully understand this stuff and must appreciate how positive you write

[...] Keep CSS hacks to a minimum. “Don’t use hacks unless its a known and documented bug. This is an important point as I too often see hacks employed to fix things that aren’t really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with. [10 Quick Tips for an easier CSS life] [...]

Share your thoughts...

mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators


Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Blogs Worth Reading