Object Oriented CSS: Catchy Buzz-phrase or Legitimate Design Approach?
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:
- Class
- Object
- Instance
- Method
- Message passing
- Inheritance
- Abstraction
- Encapsulation
- Polymorphism
- Decoupling
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..."
Object oriented CSS: should it matter?
Is it relevant?
I think so, it's basically putting a name to an approach used by the CSS author, in much the same light as creating styleguides. Is it useful? Yes. Is it easy to inherit someone else's OOCSS work? Probably not.
What are the benefits of OOCSS?
Abstracting style attributes of a certain component is always good for style consistency over the whole of the site. Say you want to change the border style of the components for a fresh new look: You'd typically change a few lines concerning the border-style master style.
An example
I created a UI Developers styleguide (or style vocabulary) concerning all the 'widgets' in our web app. Each widget would be classified according to its intended contents. Each widget could have any number of predefined box-styles, background-styles. Each widget could also lay out its contents different depending on what parent element it was placed under.
This amounted to code like: <div class="free bg_neutral form_search">
being used for each wrapper / container, with each class being: "Box Style, Background Style, Content" respectively.
The developers working on the HTML / Views could then easily switch out any of the predefined styles and replace them with more appropriate ones. e.g. replacing bg_neutral
with bg_gradient_fff_eee
for a gradient background instead.
I think we saved countless lines of CSS code, because we could use interchangeable properties on a few core 'widgets', rather than defining each and every unique incarnation of each 'widget'. It also makes cross-browser fixing much easier, because you can tackle the 'widgets' styles independently. (Most browser bugs are related to box dimensions and position/layout)
In my opinion, more UI folks need to go thru a StyleGuide / Style Vocab exercise when designing and implementing the front-end of their sites. Create consistency in the visual elements used on the site. Consistent visuals usually result in consistent and efficient CSS!
Hope that helps,
nd
Collaboration platform for developers and designers
Start learning Asp.net MVC as soon as possible. Designers will love you for that. :) And you'll be up to date with new development technologies that will also make your solutions much more robust and less complicated.
But otherwise. Designers should be able to read XHTML fluently. Learning asp.net semantics shouldn't be too hard. Then give then Visual Studio where they can manipulate content. As long as they know how asp.net web forms work things should be fine. They'll probably be able to do majority of things using just CSS. I know I can. Sometimes I do have to check resulting HTML, but it works.
Related Topics
Inheriting Height of a Child Node (Img Inside A)
Force Absolute Div to Listen to Parent's Padding
Are There Appearance CSS Rules for Webkit-Overflow-Scrolling: Touch "Handle" in iOS 5
Adding CSS Styling to React Native Webview
Fill Element with Slanted Background on Hover
How to Output HTML Form Data to Pdf
Negative Margins in CSS: Good Tutorial and Tricks Site
How to Remove Parent Opacity in CSS
CSS Style for Links Pointing to The Current Page
How to Float Image Inside of Div
How to Stack Two Arrow Images (Upvote/Downvote) on Top of Eachother Using CSS
Can a Child Div Have a Higher Opacity Than Parent with CSS
How to Get Another Element Value in Less
How Specify Two CSS Classes: from Property and Conditional Class
Making Responsive Images with Different Aspect Ratios The Same Height
Options to Solve Browser Compatibility Issues
Position Fixed on Chrome Mobile Causing Issues When Scrolling