A presentation subject to Object Oriented CSS

 

What is Object adjusted CSS?

The idea of ‘Object adjusted Programming’, is widespread among developers, and forms the essential for any trendy programing language. options like knowledge abstraction, modularity and inheritance build it a favorite in committal to writing large-scale applications.

Object adjusted CSS, because the name suggests, is implementing the ideas of OOP in structuring and building CSS3 rules, that area unit simple to recycle, thereby reducing the loading time and increasing the performance of websites incredibly! The key purpose here is, to spot, build and elegance standard reusable ‘objects’ in a very page, and to recycle it in multiple instances by extending them with extra options where required. Here associate degree ‘object’ refers to the essential markup language markup and its CSS rules. Apparently, here, the key challenge goes to be, distinguishing the ‘object’ and building rules for it.

Following area unit some key aspects in object-oriented approach to CSS building:

1.     produce a part library
2.     Separate instrumentation and content / Avoid Location dependent designs
3.     Separate Structure and skin
4.     Extend base objects victimization category names
5.     keep on with linguistics category names

Pros and Cons?

Following such associate degree approach of building CSS has its own pitfalls and blessings

Here area unit a couple of cases, wherever adopting such a framework ‘may’ backfire:

1.     OOCSS is suited to actually massive websites / application that area unit crammed with reusable parts. it's going to not provide desired ends up in smaller websites and applications. thus decide reasonably reckoning on the dimensions of the add hand
2.     If not neatly used, making the part library will end up to be a large number, and become a maintenance nightmare for alternative coders
3.     Documentation could be a should. every block of code ought to be clearly commented out with the proper points for alternative coders to soak up the idea, that otherwise will become too tedious just in case of a information transition

Some obvious blessings of adopting this approach are:

1.       Less lines of CSS3 code
2.     Cleaner markup language markup, with logically smart category names and hierarchy
3.  linguistics markup, means that a lot of SEO friendly pages
4.  much better page optimization, with a lot of quicker loading times, since most of the parts area unit reused
5.  climbable markup and CSS3 code generator, wherever a lot of parts will be interplanetary into the library while not heavy alternative parts, because the base objects area unit freelance of the other containers
6.  simply theme-able layouts, since amendments to the bottom object will utterly change virtually the total presentation layer instantly