Comments on: Evening Tip: Save Time By Using Multiple Classes.

By: Web Design and Development Tutorials | Serene Destiny

Web Design and Development Tutorials | Serene Destiny — Fri, 11 Dec 2009 23:29:06 +0000

[...] Techniques 10 Principles of the CSS Masters Evening Tip: Force IE6 To Display Alpha Transparency Evening Tip: Save Time By Using Multiple Classes Evening Tip: Insert Flash The Correct Way Weekend Quick Tip: Create Your Own Simple Reset.css [...]

By: Alex

Alex — Tue, 23 Jun 2009 20:20:29 +0000

All this complaining about descriptive named classes, did the code examples change since this article was published?

Seems like..

.primaryColor{

}

.articleImage{

}

define structure/are named in a way that makes them reusable.

By: Susan Litton

Susan Litton — Sat, 16 May 2009 06:39:57 +0000

I found this tip to be very helpful. I understand the ideas behind the notion that classes should be named to reflect content instead of styles. However, I’m working on a very large site and I keep forgetting the hex codes of my primary and secondary colors. I write them on scraps of paper on my desk but I can never find them when I need them. Creating .primaryColor and .secondaryColor classes could be helpful.

By: Greg

Greg — Sat, 28 Feb 2009 16:54:03 +0000

@Dino – its not actually a typo but a bug in the presentation widget used to present the code sample. i’ve seen this before on other blog articles.

By: Ethan

Ethan — Mon, 16 Feb 2009 11:17:34 +0000

I’m strange in the way I switch classes and ida.

By: sean steezy

sean steezy — Mon, 09 Feb 2009 19:24:33 +0000

I tried doing it this way for a website once… it was a nightmare. My inheritance sucked and I had multiple style overwriting eachother… I need to get schooled on hierarchy and inheritance.

By: srawetek

srawetek — Tue, 30 Sep 2008 03:52:42 +0000

very,very goodtip.

By: Dave Ellis

Dave Ellis — Fri, 05 Sep 2008 14:18:26 +0000

This is really useful and something that I need to work on implementing more into my sites. I think a lot of being able to write your css out like this comes down to planning.

By: Jatin Meshiya

Jatin Meshiya — Tue, 02 Sep 2008 06:27:13 +0000

I am Yahoo Store Developer, and I always use the CSS classes that repeat again and again. in fact if you have ever find e-Commerce layout has category page, product listing pages, home page with future products and many more… such as new arrivals in left navigation, highest rated product in right navigation etc has same block layout. In these cases we are using the same style. My mean to say one same class.

We also maintain hierarchy in CSS. It is really very good practice in e-Commerce layout. One more thing I want to tell you that if possible then use the name that indicate the proper place that they will be apply.

By: Jonathan

Jonathan — Mon, 01 Sep 2008 11:56:52 +0000

This article leaves something to be desired, but it’s a great idea.

You’re using named elements, rather and descriptive elements.

What css is trying to emulate is something called a polymorphic function, or polymorphism. Code should be written without a specific type, so that you can re-use that code down the road on all kinds of things you may not have originally intended. So, for example, instead of calling your image callouts .articleImage, consider something like .decoratorstyle1. There are a ton of naming conventions, and that’s NOT THE POINT of this. If you use abstraction, you can re-use your base classes outside of their intended name space and object space, and dramatically reduce the amount of css required, especially on complex or multi-layout sites. Remember, a subclass should only have to capture the delta of the change from the parent class, which really eliminates a lot of code.

See this article on the subject:
http://www.simplebits.com/notebook/2003/04/15/css_inheritance.html