Comments on: CSS tips

By: Stuart Robertson

Stuart Robertson — Thu, 25 May 2006 16:44:03 +0000

Some good tips there.

If you’re serious about improving your CSS + xHTML, these two resources are also worth a visit:

By: Workplace Life

Workplace Life — Thu, 25 May 2006 13:55:16 +0000

I find that a good way to get into CSS is to take an existing CSS from a design that you like and go through it step by step, looking up any tags that you don’t recognize. You can then take a look at some of the source code that references those styles to see what the results are and where it is used.

I find real time experience to be the best teacher =).

By: Dave Dash

Dave Dash — Thu, 25 May 2006 12:59:01 +0000

I agree, don’t name things based on what it looks like, e.g. don’t name a selector “bold” but at the same time, I wouldn’t name it where it is either. For somethings it might make sense, but generally you would avoid that, because your layouts change. For example the b5media is on my left, but that doesn’t mean it shoudl be in #leftbar, why not in #b5media.

The avoidance of selectors like .red is due to the fact that we may as well just use inline styles if we’re going to do selectors like .red. I use “red” a lot but it’s usually a “warning” or “notice.” It makes a lot more sense to people who interpret color differently and might be using different style sheets.

Good find Darren, many bloggers can definitely benefit from better styles. (BTW, I really like your sites clean look).

By: Peter Mount

Peter Mount — Thu, 25 May 2006 07:38:04 +0000

I hate to be a spoilsport but on the w3c.org web site (with the online html and css validators):

Business Logs had 23 errors in the xhtml. There were 2 errors in the CSS, generated by the use of the underscore hack. This is forgiveble but with IE7 coming this is not good ( see http://24ways.org/advent/avoiding-css-hacks-for-internet-explorer). Also, the CSS generated a tonne of warnings.

Wisdump (Scrivs) had no errors in the CSS but still had a lot of warnings. The html validator found 26 errors in the xhtml.

Sorry if I seem picky but if your going to write about CSS you’d better be prepared for people like me looking at the xhtml and css behind your web site or blog.

By: Steven Bradely

Steven Bradely — Thu, 25 May 2006 06:28:26 +0000

Some good tips that I would advise everyone to follow. I organzie my css the same way though I use a different order. It’s so much easier to find things than by having typography in one place and color in another.

I disagree on a couple of points, though only slightly. I will make use of defaults if possible. It can save extra code. For example my tags are generally going to be the same on every page. There’s no reason they need extra classes applies. Same for tags which I want to look the same throughout my content. I’ll happily add some tags where necessary, but if there’s no reason to it can space file size and consequently download time. Another tip along that same line is to use shortcuts. Most css properties have shortcuts that can save a lot of space.

I disagee a little too with the last point. If I have a class that is only there to make some text red there’s nothing wrong with giving a class name or red. Yes if it’s a firetruck it doesn’t need class=”red truck fire” in that case I would have a separate class called firetruck. However there might be times where I want to have various elements througout a site simply be red and having a class named red that only sets the color red is going to be the simplest way to do that.

After reading this post I think I may have decided on the topic of my next post.