• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Object Oriented CSS (OCSS)


#2
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...

p.main{
font-size: 11px;
}

p.footer{
font-size: 10px;
}
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..

p.just{
text-align:justify;
}
then in your code you just do

<p class="main just">This is my main paragraph text.</p>

<p class="footer just">This is my footer paragraph text.</p>
 

Harry

Senior Member
#4
Darren said:
…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..…
You wouldn't add an insemantic class. If you want to justify all paragraphs you use p{text-align:justify;}
 
#6
Jazajay said:
Team DF please delete, missed Harry's second post.
Cheers. :)
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;

"SELECT COUNT(*) FROM users"
would work the same as

"SELECT COUNT(*) FROM users;"
but do the first in a mySQL console window and it will sit forever waiting for the line termination.
 

Jazajay

Active Member
#7
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.

Its very bad programming practice
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.

key:
Red ~ PHP
 
#8
Jazajay said:
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, this 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.
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.
 

Jazajay

Active Member
#11
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

#id{cssrule;cssrule;cssrule}

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?

Key:
Purple ~ CSS
 

Jazajay

Active Member
#12
In fact quoting the site you just linked to ~
Browsers don't care how pretty your code it, they process the code between tags, real or implied. Formatting code with spaces, tabs, and returns makes it easy for humans to read, but slower for browsers to download.
Which isn't that my point?
So yeah cheers for linking to it. :rolleyes:
 
#13
Jazajay said:
In fact quoting the site you just linked to ~
Which isn't that my point?
So yeah cheers for linking to it. :rolleyes:
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'.