Question re: 'extends' mechanism

7 views
Skip to first unread message

KingCode

unread,
Sep 23, 2009, 10:56:32 PM9/23/09
to Object Oriented CSS
Hello,

I am really intrigued by OOCSS and would like to know more but got
stuck in the starting block. I don't have much experience with CSS
either - my apologies in advance if I missed the obvious.

What is meant precisely when a class 'extends' another as per the
Getting Started instructions on the site ? Or, e.g. what would be the
syntax for extending .leftCol?

My understanding is that by grouping classes in the HTML their
properties are aggregated, and that a class can be augmented/overriden
by the cascade mechanism - but what is the OOCSS (or is it just CSS)
mechanism by which a ".leftGadget" can be made to have all of
".leftCol"'s style properties?

Thanks for any comment!

KC

brad dunbar

unread,
Sep 24, 2009, 9:22:16 AM9/24/09
to Object Oriented CSS
KC,

My understanding is that 'extending' a css class means using the
cascade to add properties to an element.

For instance, extending '.leftCol' with '.leftGadget' would consist of
adding a rule for '.leftGadget' sometime after the '.leftCol' rule:

.leftGadget{ border: solid 1px #000; }

and then applying both classes to your element:

<div class="leftCol leftGadget">
content...
</div>

Does this answer your question?

KingCode

unread,
Sep 24, 2009, 10:58:50 AM9/24/09
to Object Oriented CSS
Totally - thanks Brad. (Although I have a follow-up question below :))

That is what I thought initially - only, it seemed like OOcss has the
'encapsulated' form as in OO-programming.

From looking at the UML diagram and reading expressions such as 'all
classes made available to [some class]', I was under the impression
that the hierarchy is enforced intrinsically.

Rather, it is the responsibility of the user to make it work by
grouping compatible css styles, which can be done by following the
OOCSS API - so it sounds like OOCSS offers modules (CSS libraries)
promoting a new standard of best practices?

Would this be an accurate description? I will dig into the exercises
to get a better grasp.
KC

KingCode

unread,
Sep 24, 2009, 12:28:53 PM9/24/09
to Object Oriented CSS
As an addendum, how is the rule .liquid { extends: .page;...} in
template.css, implemented? I searched the w3 properties and couldn't
find 'extends' anywhere - or is it a marker for a pre-processor? a
keyword for OOCSS's use?

Thanks,

KC

Adam Stacoviak

unread,
Sep 24, 2009, 12:48:05 PM9/24/09
to object-or...@googlegroups.com
Isn't that a feature Nicole is pushing for? That line should be commented to explain that.

--
Adam Stacoviak | Handcrafted
m. 713-492-4598
http://twitter.com/adamstac
http://gethandcrafted.com

Nicole Sullivan

unread,
Sep 27, 2009, 1:10:56 AM9/27/09
to Object Oriented CSS


On Sep 24, 9:48 am, Adam Stacoviak <a...@gethandcrafted.com> wrote:
> Isn't that a feature Nicole is pushing for? That line should be commented to
> explain that.
>

Yes, exactly right. I removed that bit of code for now, I don't want
to confuse people.

I'll be asking for feedback on the feature shortly... more to follow.
Reply all
Reply to author
Forward
0 new messages