In according to Wikipedia OOCSS means:
Object-oriented CSS (OOCSS) is a CSS methodology that focus of OOCSS is the idea of treating page elements as objects, giving all these objects classes, treating objects’ classes as single entities in style sheets, and taking it from there,
If you still need to know more check the OOCSS website from this URL: http://oocss.org/
Main purpose of OOCSS is to get the elements used and repeated within the page as a object and use them where necessary.
OOCSS has 2 main principle:
Separation the structure from the skin
Structure and design files are separate files.
Sturucture means:
“width, height, padding, margin , position”
Design means:
“border, color, font, background” .
Design files and Sturucture files must be seperated.
Check the below image to know more about the concept:
Separation the container from the content
This principle suggests that the child-selectors should be uses less. If element used in more than one place on the site , then the use of child selectors violates OOCSS rule and leads to code duplication.
The use of OOCSS
- As your project grows, the size of CSS files increase then reduces the code speed.We can control the css size when writing code with OOCSS.
- Your codes become understandable
- In OOCSS, snippets are encoded in CSS and expanded in HTML.
