Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Object Oriented CSS (OCSS)

Discussion in 'Website Design Forum:' started by HippySunshine, Sep 28, 2009.

  1. HippySunshine

    HippySunshine Senior Member

  2. darren

    darren Member

    This is not difficult, and I think a lot of people do this by default.

    Apart from the way you should use it to remove any location (of elements) or specifics to your classes (not 100% do-able, you still need things like a header which you wont use anywhere else and should be referenced by id instead of class). It should be used for all re-usable classes

    Its simply using mutliple css classes at once.

    Lets say I have paragraphs tags in my css like...

    then say you want to justify all of your paragraphs throughout your site, instead of adding text-align: justify; to both paragraph classes in your css you would add a new css rule..

    then in your code you just do

  3. Harry

    Harry Senior Member

    OOCSS is just slapping a name on how proper CSS should be written anyway IMO.
  4. Harry

    Harry Senior Member

    You wouldn't add an insemantic class. If you want to justify all paragraphs you use p{text-align:justify;}
  5. darren

    darren Member


    Well yeah

  6. darren

    darren Member

    Well yeah, thats because it is a line terminator and there is no new line. However, you will be sorry if browsers want your code to be correct like many compilers.

    Take that attitude to C, PHP etc and it wont like you :)

    Its very bad programming practice. What if you edit that class later on then have to debug that you have two lines that are not terminated.

    Ex. You can do the same thing with mySQL when running database queries in PHP like the following;

    would work the same as

    but do the first in a mySQL console window and it will sit forever waiting for the line termination.
  7. Jazajay

    Jazajay Active Member

    Yeah but dude that's 3 different languages, and in fact in PHP, much like CSS, you can miss off the closing delimiter, if it's the last section of code, as it is not needed.

    <?php include("sitevariables.php");include("header.php")?>

    Will work the same as ~
    <?php include("sitevariables.php");include("header.php");?>

    If I then want to add something else on and I get an error, I look at it and say o I missed the delimiter.

    All you need to do is change it when you add something new. Not that much of a big deal TBH, as you are cutting bytes and thus server strain which is a lot, lot better.

    Personally I would disagree with that, as you are shortening your code, thus reducing bandwidth, sever strain and increasing page preformance be it slight. It's extra code that doesn't need to be there so can safely be removed.

    Red ~ PHP
  8. darren

    darren Member

    Everybody codes differently, but I would stay on the side of properly terminated code. You never know what program etc will be interpreting your files.

    A few semi-colons wont increase server strain or inflate the page beyond delivery. I think we are beyond 1mhz processors and 14kb modems.

    If your site is big enough that you are looking at single characters to optimise filesize and performance, then you should be precompiling your content and files/pages which removes all semi-colons anyway. (The whole file woudl be reduced to bytecode (in Java) (JSP's))

    I work with some of the top websites on the internet (one has 18 servers for the website alone - never mind the databases) and in terms of bandwidth/concurrent users. But I assure you never once have the devs thought about removing semi-colons from their CSS files to reduce load.
  9. darren

    darren Member

  10. glenwheeler

    glenwheeler Senior Member

    All I can say is liste to the CSS master, Mr Harry Robert's...that guy is simply a wizard!
  11. Jazajay

    Jazajay Active Member

    O okay if we are going to argue over it that much fair enough, but I do that's 1 of the reasons I write my code as


    Again because it gets rid of the pointless characters that are not needed.

    The code still works and I suppose it's down to preference, but why add useless characters when they are not needed and there are no good reasons to?
    O apart from I may make a mistake if that rule needs changing, in which case you just add the delimiter anyway, so there's no real reason TBH, lets face it. It's not time consuming at all, doesn't effect the code and TBH is slightly cleaner.

    Again it's code that doesn't need to be there so why add it?

    Purple ~ CSS
  12. Jazajay

    Jazajay Active Member

    In fact quoting the site you just linked to ~
    Which isn't that my point?
    So yeah cheers for linking to it. :rolleyes:
  13. darren

    darren Member

    Well you see, I never said it was wrong. I said its a moot point for the most part. However, this article is talking about all the combined efforts of the whitespace, lengthy variable/class names and such and such possibly making a difference (as your whole file could double in size for e.g.). Not about 20 semi-colons in your css file.

    At the end of the day, if I ended up working on CSS files that were coded by somebody else I would rather that the semi-colons were in place but then thats just me. Its up to personal preference.

    Like I said before. If you were really that bothered about a few bytes your code would be 100% optimised for a computer/download stream but totally unreable by humans and non-maintainable overall. You need to find a happy medium and releaving your css classes of the last semi-colon is just bad practice because unless you have a 200mb css file the benefits do not outweigh the proper coding practice. 'IMO'.
  14. Jazajay

    Jazajay Active Member

    That I do disagree with TBH. But as you rightly say, and I do actually have work to get done today :D, ~
    Which I agree with 100%.

    Jaz :)
  15. HippySunshine

    HippySunshine Senior Member

    so... its like minimising my code to enable faster site loading basically?

Share This Page