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:
A lot of times the above code can simply be reduced to this:
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:
-
a.link{color:red;text-decoration:none}
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.
-
#nav a {color:red;text-decoration:none}
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.
March 26th, 2007 at 8:22 am
I think some of my earlier websites were guilty of all of the above
March 26th, 2007 at 11:23 am
[...] Css: http://cssvault.com/ http://www.csszengarden.com/ 10 quick tips for CSS [...]
March 26th, 2007 at 6:19 pm
I always thought it was spelt ‘divitis’.
March 26th, 2007 at 10:07 pm
[...] 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] [...]
March 26th, 2007 at 10:57 pm
This wasnt helpful at all,
I’m having CSS woes right now
March 26th, 2007 at 11:03 pm
at my work we call it Irritable Div Syndrome
March 26th, 2007 at 11:38 pm
[...] 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] [...]
March 26th, 2007 at 11:49 pm
[...] 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 [...]
March 27th, 2007 at 12:08 am
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
March 27th, 2007 at 12:16 am
10 rules to live by, indeed. Wait, yonder… I see CSS3!!! How long will it take to get there?
March 27th, 2007 at 12:26 am
Good advice
But re #1, try working with a designer, you end up fulfilling his/hers needs instead of the customers
March 27th, 2007 at 12:38 am
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
March 27th, 2007 at 12:56 am
absolutely true information about css ,
thanks
March 27th, 2007 at 1:14 am
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!!
March 27th, 2007 at 1:28 am
Hooray for the millionst “10 Tips for CSS”-blog-entry D: This one belongs to the rather stupid ones
March 27th, 2007 at 1:48 am
Nice blog entry!
March 27th, 2007 at 1:50 am
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.
March 27th, 2007 at 2:11 am
We use CSS but then Joomla inserts tables to our template.
March 27th, 2007 at 2:16 am
“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.
March 27th, 2007 at 2:17 am
Divitus is spelled:
Divitus
March 27th, 2007 at 2:26 am
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.
March 27th, 2007 at 2:48 am
10 Quick Tips for an Easier CSS Life…
10 Quick Tips for an Easier CSS Life posted at IndianPad.com…
March 27th, 2007 at 2:49 am
10 Quick Tips for an Easier CSS Life…
This article shares 10 CSS tips to help make your web development life easier….
March 27th, 2007 at 3:49 am
John – I thought I invented the word myself so I spelt it how I liked
Dan – Thanks and sorry if I stole your idea
March 27th, 2007 at 5:03 am
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
March 27th, 2007 at 6:28 am
[...] This article shares 10 CSS tips to help make your web development life easier.read more | digg story [...]
March 27th, 2007 at 6:43 am
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.
March 27th, 2007 at 6:56 am
[...] This article shares 10 CSS tips to help make your web development life easier.read more | digg story [...]
March 27th, 2007 at 7:16 am
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.
March 27th, 2007 at 8:15 am
@Steve James: I can’t wait for CSS3 to become the standard either.
divitus – divitis / tomato – tamoto
March 27th, 2007 at 8:18 am
NOTE: For those looking for personal CSS help, you would be well served to try here.
March 27th, 2007 at 8:50 am
I should really consider #5 for my blog!
March 27th, 2007 at 8:53 am
[...] http://www.search-this.com/2007/03/26/10-quick-tips-for-an-easier-css-life/ [...]
March 27th, 2007 at 9:09 am
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.
March 27th, 2007 at 9:22 am
Great tips….
March 27th, 2007 at 9:43 am
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.
March 27th, 2007 at 9:57 am
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!
March 27th, 2007 at 11:18 am
Awesomeness!
March 27th, 2007 at 2:41 pm
Thanks for taking the time to comment all. It’s nice to know that we are reaching the people !
March 27th, 2007 at 3:35 pm
A lot of these are useful for small sites, but I challenge anybody to avoid “Classitus” if they’re working on a larger site.
March 27th, 2007 at 5:46 pm
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!
March 27th, 2007 at 7:52 pm
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.
March 28th, 2007 at 3:21 am
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.
March 28th, 2007 at 12:05 pm
[...] 10 quick tips for an easier CSS life. My favorite: don’t use browser hacks unless it’s the last resort. [...]
March 28th, 2007 at 5:34 pm
[...] 10 Quick Tips for an Easier CSS Life (tags: css, design, tips) [...]
March 28th, 2007 at 8:27 pm
[...] 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 » [...]
March 29th, 2007 at 1:36 pm
[...] 10 CSS Tips to Make Your Life Easier [...]
March 30th, 2007 at 1:22 am
[...] 10 Quick Tips for an Easier CSS Life (tags: css webdev programming design) [...]
March 30th, 2007 at 10:09 am
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/
March 31st, 2007 at 2:25 am
[...] 10 Quick Tips for an Easier CSS Life (tags: CSS Design Recommendations WebDesign HTML tips) [...]
April 1st, 2007 at 10:32 pm
[...] April 1st, 2007 · No Comments 10 Quick Tips for an Easier CSS Life Stumble it! [...]
April 2nd, 2007 at 2:38 am
[...] read more | digg story Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages. [...]
April 2nd, 2007 at 3:09 pm
[...] 10 Quick Tips for an Easier CSS Life [...]
April 2nd, 2007 at 6:31 pm
[...] 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. [...]
April 5th, 2007 at 12:18 am
[...] http://www.search-this.com/2007/03/26/10-quick-tips-for-an-easier- [...]
April 11th, 2007 at 9:59 am
[...] 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. [...]
April 16th, 2007 at 12:24 pm
[...] 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 [...]
April 16th, 2007 at 10:50 pm
[...] 10 Quick Tips for an Easier CSS Life (tags: css WebDesign tips design tutorial webdev howto) [...]
April 18th, 2007 at 10:17 pm
A well structured information, thank you.
You have already solved many of my problems before the my work started.
Keyur
April 19th, 2007 at 2:08 am
[...] has an interesting article on practices to improve your CSS. Visit the site for all the details, but here are the cliff [...]
April 19th, 2007 at 3:47 am
[...] 10 Quick Tips for an Easier CSS Life [...]
April 22nd, 2007 at 7:48 am
This is an amazing article. That link to get out dated browsers is super handy too!
April 23rd, 2007 at 4:58 am
Thanks for the article, i will publish the Turkish translation of this article this weekend.
May 4th, 2007 at 10:54 am
[...] 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 [...]
May 7th, 2007 at 5:37 pm
Quite interesting , practicaly useful to newbies to CSS
May 8th, 2007 at 12:20 pm
[...] 10 Quick Tips for an Easier CSS Life [...]
May 10th, 2007 at 6:24 am
[...] 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] [...]
May 13th, 2007 at 10:53 pm
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
May 24th, 2007 at 10:56 am
[...] 10 Quick Tips for an Easier CSS Life [...]
June 17th, 2007 at 6:12 am
[...] 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 [...]
July 13th, 2007 at 12:52 am
[...] 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] [...]
August 13th, 2007 at 5:12 am
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]
August 24th, 2007 at 5:58 am
This was helpful! No more CSS woes!
August 27th, 2007 at 6:37 am
[...] 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] [...]
September 1st, 2007 at 7:12 am
[...] read more | digg story [...]
September 2nd, 2007 at 11:28 am
[...] is an article over at Search-This that points out a couple of beginner mistakes that are pretty interesting. Here are some highlights [...]
September 2nd, 2007 at 12:30 pm
“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.
September 26th, 2007 at 6:32 am
Hi
This is an amazing article. That link to get out dated browsers is super handy too!
Thanks
October 4th, 2007 at 7:52 am
[...] 10 quick tips for an easier CSS life – search-this.com [...]
October 12th, 2007 at 3:18 am
is class function working with as same as href function?
October 12th, 2007 at 3:59 am
@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.
October 25th, 2007 at 9:59 am
Really interesting article and useful informations! Best regarts from Germany send Handball!
October 26th, 2007 at 5:00 am
[...] 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] [...]
November 2nd, 2007 at 2:37 am
absolutely true information about css ,
thanks
November 3rd, 2007 at 7:49 am
[...] 10 quick tips for an easier CSS life – search-this.com [...]
November 4th, 2007 at 8:37 am
Great ! I need this
thanks
November 4th, 2007 at 11:56 am
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.
November 25th, 2007 at 10:05 pm
Thanks, great article..
December 9th, 2007 at 9:25 pm
Great ! I need this
thanks
December 15th, 2007 at 7:47 pm
Great article!
Many, many thanks!
Greetings from Poland
December 16th, 2007 at 4:53 pm
True! Well done!
December 29th, 2007 at 1:59 pm
This is an amazing article. That link to get out dated browsers is super handy too! Thank you. This is very goog job.
December 30th, 2007 at 5:07 pm
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
December 31st, 2007 at 3:38 am
Best article. Good work – congratulations. Happy new year – Mielno.
December 31st, 2007 at 10:37 am
[...] 10 Quick Tips for an Easier CSS Life [...]
January 4th, 2008 at 6:46 am
Happy new year 2008. good job
January 7th, 2008 at 9:50 am
This was helpful! No more CSS woes!
January 11th, 2008 at 2:56 am
A lot of these are useful for small sites, but I challenge anybody to avoid “Classitus” if they’re working on a larger site.
January 11th, 2008 at 10:07 am
@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.
January 12th, 2008 at 4:01 pm
Congratulations, your article is really good.
January 13th, 2008 at 10:53 am
I full agree with You.
Regards from Poland
January 14th, 2008 at 7:49 am
Happy new year 2008.
January 14th, 2008 at 10:16 am
Very usefull information, thank you.
January 17th, 2008 at 4:28 pm
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
January 18th, 2008 at 5:38 am
Flexibility… That’s what we’re waiting for. Many thanks!
January 18th, 2008 at 12:18 pm
Hi, Thanks for the article, i will publish the Turkish translation of this article this weekend.
January 19th, 2008 at 6:27 pm
Thanks for these informations ! Great job !
January 22nd, 2008 at 6:16 pm
Very usefull information, thank you.
January 23rd, 2008 at 8:53 am
Good article , thx.
January 23rd, 2008 at 4:04 pm
Very nice article. Thanks for taking the time to write it down. Keep up the good work.
January 23rd, 2008 at 4:05 pm
Very thanks for very interesting article. btw. I really enjoyed reading all of your posts.
January 23rd, 2008 at 5:35 pm
Thanks for the comments
January 27th, 2008 at 1:15 am
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?
January 27th, 2008 at 9:11 am
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.:)
February 5th, 2008 at 9:34 am
I agree with You Paulo OB.
February 6th, 2008 at 5:36 pm
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.
February 7th, 2008 at 4:12 am
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.
February 7th, 2008 at 4:18 pm
Hi, Thanks for the article, i will publish the Turkish translation of this article this weekend.
February 14th, 2008 at 3:00 pm
absolutely true information about css ,
thanks
February 14th, 2008 at 4:36 pm
Excellent tips, will be of really good use in the future. =)
February 14th, 2008 at 4:40 pm
Thank you! Very nice and interesting article.
February 28th, 2008 at 9:35 am
Yes, very interesting article, I have found there something for me, some helpfull informations, really good. Thank you!
March 1st, 2008 at 3:34 am
I’ve been looking for something else:). I’ve found this article by mistake and it’s really useful! Thanks alot!
March 1st, 2008 at 8:35 am
Excellent, good articles
March 1st, 2008 at 8:53 am
so what I can say good work
March 1st, 2008 at 9:07 pm
bravo bravo, very good job
March 3rd, 2008 at 9:40 am
Thanks
Its always good to get tips for better design
Haroun
March 17th, 2008 at 7:05 am
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!
March 18th, 2008 at 3:41 am
Thank you for the good articles have helped me a lot.
March 24th, 2008 at 12:18 pm
You are right.. Good one. thanks!
March 25th, 2008 at 6:10 am
Thx… Nice & excellent Article.
March 28th, 2008 at 9:16 pm
the best article i have ever read
April 9th, 2008 at 4:52 am
Good article , thank You
April 9th, 2008 at 11:22 pm
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.
April 10th, 2008 at 6:12 am
[...] 10 Quick Tips for an Easier CSS Life (tags: css webdesign) [...]
April 10th, 2008 at 8:32 am
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.:)
April 17th, 2008 at 2:55 am
God job – Im waiting for next.
April 24th, 2008 at 8:56 am
Real Good job. Big thanks man
May 9th, 2008 at 11:24 am
good article, thanks you
June 22nd, 2008 at 7:32 am
[...] 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 [...]
August 1st, 2008 at 1:26 am
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.
August 4th, 2008 at 2:55 pm
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.
September 11th, 2008 at 7:51 pm
[...] 10 Quick Tips for an Easier CSS Life by Paul Ob [...]
October 3rd, 2008 at 3:38 am
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.
November 1st, 2008 at 7:33 pm
This is a real help to people like me who has very low experience in CSS. Thanks…
November 27th, 2008 at 12:43 am
I think these blog is really useful for new comers and Excellent resource list.
January 19th, 2009 at 2:57 am
Good article , thank You
March 30th, 2009 at 11:13 pm
[...] 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] [...]
April 15th, 2009 at 3:21 pm
[...] common misuse of divs can be found in the following example: PLAIN TEXT [...]
May 10th, 2009 at 7:50 pm
I call it Irritable Div Syndrome.
May 19th, 2009 at 6:50 am
Many many thanks for this tips. A lot of these are useful for my sites,
May 25th, 2009 at 3:09 am
Yeah, 99% of the time there will be an html tag perfect for the job in hand.
May 26th, 2009 at 9:17 am
Good article , thank You
May 28th, 2009 at 9:33 pm
Thank you for the good articles I really learned a lot from your article.
July 14th, 2009 at 10:24 pm
[...] 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] [...]
July 16th, 2009 at 10:43 pm
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;
}
August 9th, 2009 at 3:43 am
Really Good article. Big thanks man
Turkcell kontor
October 8th, 2009 at 9:10 pm
so good ,thanks
November 15th, 2009 at 2:04 am
Thats a really nice work thank you verry mutch.
December 30th, 2009 at 10:40 am
Another great article