David,
I am a C#.net programmer with several years of front-end design experience. I
learned the disciplines in isolation and never considered asking the questions
you are asking. Your questions really intrigued me.
An object in OO programming is meant to represent a tangible thing... it is
somewhat akin to content in the HTML/CSS model... or perhaps a better analogy
is it is like a jQuery or JavaScript function that generates content. You
instantiate (or make) an object from a class (a template for an object).
A class in CSS is not meant to represent a tangible thing... it is meant to
"skin" a tangible thing or make it look a certain way. In OO programming, you
might create an object called car and give it a color property. Then you could
assign a color to the car... perhaps by declaring something like:
car impala = new car();
car.color = "red";
In front end web design, the object and the color property are not so closely
coupled. They are meant to be separated. But you can achieve the same thing:
<h1 class="cherryRed">Impala</h1>
.cherryRed {
color: #cc0033;
}
(Note, though that I've named my class with meaningful semantics. I could have
called the .cherryRed class something more generic like .color... or something
even more ghastly and obscure like .x but I've chosen to give it a name that is
more descriptive. Thus, the HTML markup reads very much the same as it would if
I was using OO programming, but I digress...)
When I think about your question... I think what you are asking is how you can
achieve the "template reusability" of OO classes in a CSS context. I think the
answer to your question involves studying the following:
Inheritance (the cascade in CSS)
Selector Grouping
CSS will never feel like OOP because they are decidedly different things... And
while you might be used to declaring all of the properties of an object in a
class file, when you use HTML and CSS you are asked to separate the
presentation from the content. But once you learn how to cause the styles in a
parent element to be inherited by child elements (and the reverse... how to
prevent that inheritance) you will be able to work the way I think you want to
work with your stylesheet development. If you also keep semantics in mind, that
will also help a great deal IMO.
As for encapsulation... that is a concept in OOP that allows you to protect
some aspects of a class by making some declarations public and others private.
Here's a good definition of encapsulation that I found on the web for those of
you who aren't OO programmers:
Encapsulation is an object-oriented principle of hiding the internal state and
behavior of an object, making your code more maintainable. In C#, you can
manage encapsulation with access modifiers. For example, the public access
modifier allows access to any code but the private access modifier restricts
access to only members of a type. Other access modifiers restrict access in the
range somewhere betweenpublic and private. While you can use any of the access
modifiers on type members, the only two access modifiers you can use on types
are the public and internal. (Source:
http://www.csharp-station.com/Tutorials/lesson19.aspx)
Again, here I think the concepts of specificity, inheritance and selector
grouping will be very helpful for you.
If you want to make a style declaration "private" you need to write your style
declaration with as much specificity as possible. If you want to make it
"public" you write your style declaration with the least specificity as
possible.
p {
line-height:1.5em;
}
This declaration is the least specific. It will apply to every single paragraph.
article>p {
line-height:1.5em;
}
Here, we're getting a bit more specific and saying we only want to apply this
line height to paragraphs that are direct children of an article.
article>p:first-child {
line-height:1.5em;
}
Again, more specific here. Now we're saying we only want to apply this line
height to the first paragraph that is a direct child of an article.
So, to reiterate... studying specificity, inheritance and selector grouping
will be very valuable.
Hope this helps,
Danya
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
