Comments on: How to create CSS objects? Get the granularity right!

By: Nicole Sullivan

Nicole Sullivan — Thu, 27 Jan 2011 19:40:52 +0000

I don’t use compound selectors. They aren’t necessary.

By: Michael

Michael — Thu, 27 Jan 2011 19:05:48 +0000

Hi there,

I wonder if you saw the comment and question from Jesse. Any thoughts or experience with that approach in regards to performance, wins or fails.

Best,
Michael

By: Peter Hollingsworth

Peter Hollingsworth — Wed, 07 Jul 2010 18:58:41 +0000

When I create a top-level class like this I find it helpful to UPPERCASE the name to avoid conflicts. So I can use .comment wherever I want, but if I run across .COMMENT, I know it’s a sitewide element and has CSS already defined for it.

By: Nicole Sullivan

Nicole Sullivan — Sat, 26 Jun 2010 02:35:22 +0000

Ok, the in-depth write-up on the media object is published: http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

This has been great, you guys ask questions, that I then use as the topic of the next post.

Thanks for your help!

By: Nicole Sullivan

Nicole Sullivan — Fri, 25 Jun 2010 22:43:30 +0000

@Mike I’m not sure I know what you mean, can you show me a screenshot & URL?

By: Mike Hairston

Mike Hairston — Thu, 24 Jun 2010 14:13:33 +0000

Great writeup! Please do more of these where you work through examples! I’m on my third gig where I’ve used it, and I still get stuck on how to compose objects. You’ve lit a lightbulb for me again…

This seems trivial, but I’m curious: How would you handle the line at the bottom of the story (begins with twitter icon, contains padlock image and ends with @stubbornella) — two media blocks in a grid? or one media block with an image in the middle of the text? Two blocks seems like markup overkill but better reuse of objects…

By: A'braham Barakhyahu

A'braham Barakhyahu — Wed, 23 Jun 2010 16:45:39 +0000

Do you recommend design guides(html page created to show how css classes are used) still using OOCSS, and would it become easier with OOCSS? It seems like it would.

By: Derek Featherstone

Derek Featherstone — Wed, 23 Jun 2010 00:53:36 +0000

Nicole — all I have to say is that I love the way you think. Great stuff, and great explanation. One thing I’d love to see is an example where you convert some overly large rules to something leaner and more object oriented CSS-ish.

By: Jesse

Jesse — Tue, 22 Jun 2010 23:43:00 +0000

Nicole, thank you for the clarification!

At my current gig, we’ve decided to ignore IE6 and it’s been spectacular. I’ve been able to experiment with an approach that I could never hope to put into production before. But I’ve been running into difficulties. For instance, what I’d want to do with the HTML in the above comment is this:

and then style them with these selectors

.comment { property: value }
.comment.special { property: value }

What it’s created is a special type of class that can be used for nothing but inflecting. Inflection as in verb inflection, such as -ed in English to designate past tense. By doing this, one can never apply styles to .special, or if one does, one runs the risk of unpredictable inheritance. I could provide more detail, but I don’t want to do it in a comment.

What’s been your experience with compound selectors?

By: Nicole Sullivan

Nicole Sullivan — Tue, 22 Jun 2010 17:11:43 +0000

@adam, I would do it like this:

.comment {}
.specialComment {}

Where a special comment would extend the comment, assuming they shared enough common styles, so the HTML would be: