Jump to content
Stef's Coding Community
Sign in to follow this  

Object orienteted css and learning as a noob.

Recommended Posts

Hi there,


so after a long time, I am trying to get back to learning html/css. I came across a video regarding OOCSS, is anyone using this method? From the video she basiclly says dont use Id's for styling, and a few other things I havnt got my head around. Is this basiclly a better way to learn css? The tuotirals I am going through and videos use all the methods she says not to use, infact by the videos and tutorials I have seen, people are just suing bad coding methods according to her presentation. So am I really learning css properly by using videos or even tutorials that are like 3+ years old. There is nothing really on Object orientated css coding I can find other than the womans presentations. This is the link to the video.


Share this post

Link to post
Share on other sites

You're on the right track, she's talking mostly about re-using classes, and fully exploiting the CSS Specificity so that you don't have to write CSS styling for many different blocks that look similar.


If you think about it in object oriented view then you first declare a main class:


.block { display: block; font-family: 'Arial'; font-size: 1em; }


which will define properties for all elements with class 'block'. But these will be really general things that will be SAME for all elements using this class. However after this you can start getting a bit more specific (effectively 'expanding' the main class):


div.block { border: 1px solid #000000; }

p.block { margin: 12px 0; }

span.block { float: left; }


If you didn't do the above in an object oriented approach, then you'd have:


div.block { border: 1px solid #000000; display: block; font-family: 'Arial'; font-size: 1em; }

p.block { margin: 12px 0; display: block; font-family: 'Arial'; font-size: 1em; }

span.block { float: left; display: block; font-family: 'Arial'; font-size: 1em; }


Effectively increasing the size of your CSS document by repeating the same properties over and over on different scenarios.


This method she's talking about is probably the best way to write CSS, however this requires a lot of planning, and also a lot of forward thinking. However you should also remember that not everybody has the luxury of time or luxury of not using !important or ID's to write this kind of "efficient" CSS. Sometimes it's best to just bung-out some inefficient CSS, rather than spending hours trying to plan what elements should have what class, and what type of specific CSS should be written etc... I'd say this kind of CSS optimization is most useful for websites that get thousands of hits per day, as each byte you save will be multiplied by thousands. If you save 1 kbyte per user on a website that gets 10 thousand hits per day then you effectively save 10 thousand kilobytes of bandwidth a day which is around 10megabytes. But if your site gets less than 100 visitors per day, you're only saving 100kb of bandwidth per day which is really insignificant.


I'd say for now, don't worry about this kind of thing, just try to get CSS under your belt, so you're comfortable to hand-write any type of website using pure CSS and semantical HTML. Then you can probably start worrying about optimization etc. And also remember that CSS is only a teeny weeny part of a website, and there's a lot bigger things that you can optimize and get much better results, such as optimizing images, gzipping the scripts and css documents, setting proper caching rules etc.


Good luck :rolleyes:

  • Upvote 1

Share this post

Link to post
Share on other sites

Thank you for your response, yeah I was thinking it would take alot of planning beforhand, just by watching the video, it seems you qould have to work out headings, every block, tag everything. So I guess like you said I will go through the variuos videos I have from stefans amazing video collection and lyndas videos.:)


I am stil a little confused on the object oreinteted part though, so for now I will leave it alone, and just learn abit here and there.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Create New...