#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Troy, NY
    Posts
    46
    Rep Power
    68

    Object Oriented Css


    What are peoples thoughts on Object Oriented Css? I recently tried to implement it on a project and found it pretty difficult and resorted back to my traditional approach of writing css.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,126
    Rep Power
    4304
    For anyone who wants to read some about this methodology:
    Object-Oriented CSS: What, How, and Why
    An Introduction To Object Oriented CSS (OOCSS)

    I hadn't heard of this before and already I seem to have mixed feelings about it.

    To me a selector like "#container > header" is just plain silly. Why not just give the page header an ID of "header" and use "#header" as the selector? It's shorter, faster, and you won't lose IE6 compatibility for a major section of the page.

    Another thing I dislike is adding additional classes to elements purely for styling purposes.

    The Smashing Magazine article lists "Some Guidelines for Implementation". I disagree with some of them but would say that's it's generally good practice to "avoid attaching classes to elements in your stylesheet" and "except in some rare cases, avoid using !important".

    Paul-Ninja, would you mind going into more detail about what you found difficult with this approach to creating a stylesheet?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    I find it funny how some people introduce words like responsive and object orientated (in coding stuff) to give it 'more' meaning.

    Same with the semantics of web 1.0 2.0 3.0 6 trillion.O. Its totally meaningless as far as I am concerned. I read the some article of Nicole Sullivan ( I think she kind of "introduced" this stuff, the word that is) quite a while a go and the only thing I like about is is the fact that one should keep in mind that one should have a structure (for instance by using a grid system of some sort). And keeping in mind that one should optimize the code, look for similarities and combine styles. I like "Nicoles" mediabox thing, but than again its all just common sense and not something that is brand new (except for declaring the container followed by a larger-than-sign). And what I really dislike is the content property. Talking about separating content and styles (not to mention compatibility issues, saw one this week already) lol
    Last edited by aeternus; September 28th, 2012 at 04:37 PM.
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Troy, NY
    Posts
    46
    Rep Power
    68
    Originally Posted by Kravvitz

    Paul-Ninja, would you mind going into more detail about what you found difficult with this approach to creating a stylesheet?

    I found it difficult separating style and structure when setting up my style sheet and because of time constraints found my self reverting back to using inheritance and adding style and structure to the same elements.

    This approach is just something I'm not used to yet.
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Troy, NY
    Posts
    46
    Rep Power
    68
    Originally Posted by aeternus
    I find it funny how some people introduce words like responsive and object orientated (in coding stuff) to give it 'more' meaning.
    I agree about responsive web design. It is a buzz word thrown around now and there is much confusion about what it actually means even inside the development community.

    The definition of object oriented css is more than a buzz word though. It is an object oriented approach to css. Nothing more nothing less. Create an object for a specific job and then reuse it.
  10. #6
  11. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    I usually do it like this:
    1)reset some basics
    2)create a structure (mainly the positioning and dimensions)
    3)style elements if it's not possible in the structure above already
    4)very specific styling

    I call it jabadabadooCSS
    The definition of object oriented css is more than a buzz word though. It is an object oriented approach to css. Nothing more nothing less. Create an object for a specific job and then reuse it.
    You are right it implies that its the way to go and make code less redundant. But it is just common sense. If I do something twice, I I know I am doing it wrong. Its just a name for a way of Viewing the template from above and compairing and combining similarities. Thats not new that as old as mankind. As far as I am concerned The founder of this religion pretty much tells this but the difference is that she gives a name to it.
    Last edited by aeternus; September 28th, 2012 at 06:34 PM.

IMN logo majestic logo threadwatch logo seochat tools logo