It seems there is a new catch-phrase emerging in the web development field: object-oriented CSS.
On the face of it, this strikes me as simply being best-practice packaged up in a catchy slogan. I understand and fully respect the intentions behind the movement, but is there any more to it?
Does anyone have any further insight that sets this approach apart as something more credible or should I just take it as a reminder to make sure I inherit and cascade my classes correctly?
Catchy buzz-phrase AND legitimate design approach.
Though I think some of the ideas there are a bit naive in that they tend to forget the "client changes eveything as it goes" web development paradigm.
its really one of those debatable things like tables vs divs etc etc.
In my opinion, theres a lot of developers so entrenched in OO that they try to stick it on everything, first Javascript and now CSS. Dont get me wrong JavaScript has elements of OO as well, but i digress.
Since CSS is already a buzzword in itself (all the employers want the web 2.0 CSS approach) a lot of new developers are discovering it. This is not a bad thing, however as developers they did what they do best and tried to improve on CSS. In a developers mind (I'm a developer) organizing CSS according to the OO principles makes perfect sense - hence the new buzzword.
Ultimately what I am trying to say is that OO CSS is just an approach that certain people take, since it seems more logical. If you are writing CSS that is going to be maintained by developers then this approach will suit well. It really comes down to you how you write your CSS and your own personal style...
Personally I don't care how people write their CSS - if it falls on me to maintain it, Firebug makes the job trivial anyway.
I've been saying this for years.
CSS selectors are based on instance IDs and classes. It even supports multiple inheritance. How much more obvious could that be?
The beauty of thinking of CSS in object terms is that it becomes very straightforward to start "casting" your mark-up elements. Need that div to suddenly become INotRenderedAnymore? Just let JS extend it's class attribute to match .removed, don't mess around with style properties.
Obviously that's a fairly trite example, but the benefits should be clear - especially in the context of JS manipulation. You can decouple the JS from the actual styles it has to modify, which is both a maintenance and abstraction bonus, but also has fringe benefits like not setting very high-specificity styles directly (which CSS cannot override).
I would say it's more of a catchy buzz-phrase for something already present in CSS. Of course, before we start talking about what is OO and what is not and how CSS is object-oriented, we would have to define what it actually is - which is something others have struggled with before and is subject to heated debates. But if we assume that the basic principles of OO are:
we can say, that Cascading Style Sheets are somewhat object-oriented, because they allow classes to be defined, instances/objects created (by assigning a class to an element), inheritance of classes (even multiple inheritance), abstraction (e.g. by defining styles for the plain elements) and polymorphism (by defining the same class name for different elements). Of course methods/message passing is not possible, because of the static nature of CSS.
So in general I would say its a valid approach to develop CSS in an object-oriented manner, but I would not really call it Object Oriented CSS, because at least to me, it is something deeply inherent to CSS. It would be somewhat like saying "I am doing Object Oriented Java..."
I think the buzzwordiness of calling it "Object-oriented CSS" is actually detracting from its usefulness and the wider adoption of the concept.
When I read up on it, I think the claim that it was OO actually slowed my understanding of what it really was.
People who know what "object-oriented" means in programming will be skeptical, because it's not really OO, is it? It's just an attempt to apply some OO principles to CSS to improve its efficiency. And on the other side, most client-side developers will not understand the concept at all if they're not programmers, and so they'll just be baffled or embarrassed.
So, great concept, needs rebranding. Maximum CSS! Power CSS! CSS Reborn! CSS Squared! CSS Prime! Something like that.
CSS is similar to OO languages in many ways: write
p { color: red }
p span { color: blue }
and you have essentially the inheritance. Here's more complicated example with having terrier extend dog extend animal classes:
.animal { font-weight:bold; color: blue; }
.dog:before, .terrier:before { content: "GRRR"; }
.animal, .dog, .terrier { color: brown }
Now you can use classes animal, dog and terrier in an OO manner.
It is important to remember that CSS very good in solving the problem it's been made for: specifying the styles for elements in a transparent way. Could it be better with more OO concepts? I'm not sure. Let's say somebody says: the CSS file would be simpler if it looked like:
@class dog @derives_from animal /* the syntax i just invented */
@class terrier @derives_from dog
.animal { font-weight:bold; color: blue; }
.dog:before { content: "GRRR"; }
.terrier { color: brown }
This does look simpler, but an even simpler solution is to drop @class thing while adding 'dog' to any 'terrier' and 'animal' to any 'dog' server-side (trivial replace statement) or with javascript.
The best thing about CSS is that it's simple and it falls back easily, meaning browsers don't need to interpret CSS they don't understand and things works out reasonably fine. Since you'll have to break this backward compatibility with major new CSS structures, I think this makes object-oriented CSS more of a buzz phrase.