Can Object Oriented Principles Be Applied To Web Design?

Posted: 18 Mar 2013 05:30 AM PDT

When Nicole Sullivan coined the phrase object oriented css a lot of programmers reacted against it and understandably so. CSS is not an object oriented language. It’s not even a programming language. At the same time I can understand why Nicole chose the name.

The objects she talks about are the visual patterns in a design that we develop with html, css, and possibly Javascript. I thought it would be interesting to explore if a connection between object oriented programming and how we develop visual design patterns exists.

Please understand that I’m not an object oriented programmer and I’m bound to get a few things wrong talking about the subject. This post isn’t suggesting that html and css are object oriented languages. Clearly they aren’t. If, however, we can make a connection, designers might be able to apply some tried and true object oriented concepts to the development of websites.

Unified Modeling Language (UML) diagrams

The Benefits of Object Oriented Programming

A good place to start is probably with the benefits of OOP. Are we even trying to achieve the same things with modular design. I found a discussion on Stackoverflow and pulled a few responses.

Some of the benefits mentioned include:

Ease of maintenance
Reuse of code
Easily adapted, extended, and improved
Better tools to solve problems
Easier for others to work with your code

Words like flexible and design patterns are also mentioned. These all sound like the things we’ve been talking about in regards to the benefits of modular design so I’d say we’re on the right track. Granted it’s but one thread on one site, but search a little more and the same benefits come up again and again.

Principles of Object Oriented Programming

There are 4 major principles to object oriented programming.

Abstraction
Encapsulation
Polymorphism
Inheritance

For the non-programmers among us (myself included), lets provide a little more information and context about each and see if we can find a corollary in design. I won’t go into great details about each. Hopefully it will be just enough to define the concept to see if we can make a loose connection to web design.

Abstraction

In its simplest form abstraction is the creation of objects. An abstraction is something boiled down to the essential characteristics that distinguish it from others things.

It seems reasonable to look for parallels so we can use what’s been learned about one to help inform the other

Abstraction is used to manage complexity. The idea is to break up the larger complex system into smaller and simpler chunks. It should define the essential characteristics of a thing and clearly define its boundary from other things. It relies on the separation of interface and implementation.

As an example, we might abstract the concept of a shape. A shape will have dimensions and probably a contour and location in space. How we define it isn’t important. What is important is that we’d take the essential characteristics of what makes a shape and place them together somewhere.

I think defining the visual patterns in a design would count as abstraction.

Encapsulation

Encapsulation is about concealing the implementation details of an object on a need to know basis. Other objects or code that need to interact with out object don’t really need to know everything about the object.

To interact with the object you need to know what the object can do, what you need to provide the object so it can do its job, and what to expect in return after the job has been performed.

By hiding much of the details, the details can be changed and improved. As long as the basic contract of what goes in and what comes out is maintained the object can be improved independent of other objects.

We don’t really need to know how a shape is constructed to use one. We might need to provide some details like the dimensions and contour, but we don’t really care what happens next as long as we’re given back the shape we expect.

I’d say there are some parallels to design. If you want some html to look a certain way you can add a class without needing to know the specific css inside. As long as you know what adding the class will do you’ll be happy.

If you add a class .blue-border to a div and the result is a blue border around that div, do you really care whether border-color was set as blue, #00f, #00000ff, rgb(0,0,255), or rgba(0,0,255,1)?

Polymorphism

Polymorphism is the ability to assign different meaning or usage to an object based on context. In other words an object can behave like one thing under certain circumstances and like another thing under a different set of circumstances.

The word polymorphism comes from the Greek, to have many forms. There are several ways to look at polymorphism itself.

The object can be of multiple types
The form something takes is determined at runtime
The form is based on the parameters given to the object
If B is a descendant of A and a function can accept A as a parameter, it can also accept B

A big advantage of polymorphism is the reusability and extensibility of higher level abstractions. The higher the abstraction that can be reused, the more reliable and less expensive the end result of the project.

Sometimes we want our shape to be a square. Sometimes we want it to be a circle. We also want triangles, spirals, trapezoids, and rhombi here and there. The shape might able determine it should be one of these things on its own or we might need to provide some parameters. Regardless it should be able to be different things under different circumstances.

I’m reaching for a parallel here, but things that come to mind are pseudo elements to provide different states to an element or perhaps media queries that let us serve different css depending on condition. These don’t really strike me as the same thing as polymorphism though.

Descendent selectors or chained classes could perhaps work, since they enable css to behave differently under different contexts. Again I’m not sure if the parallel really works.

Inheritance

Inheritance is a way to reuse the code of one object to establish a subtype of that object. It enables new objects to take on the characteristics of existing objects. It’s a way of saying this thing over here does everything that thing over there does, but it also adds these extras. Oh, and it does some of the things of that thing over there a little differently.

It sets up parent/child relationships between objects where the child inherits from the parent. The relationship is also referred to as superclass (base class) and subclass (derived class). As you move from parent to child the object becomes more specialized. It becomes less abstract.

A quadrilateral is a kind of shape that has 4 sides. It inherits the general characteristics of all shapes and then adds some of its own. It’s more specific than the general shape. A rectangle is more specific still. It not only has 4 sides, but all those sides must meet at a right angle. It inherits from quadrilateral, which inherits from shape and it’s yet more specific. A square…well you get the idea.

I’d say the ability to add multiple classes to html parallels the idea of inheritance. The classes themselves aren’t specifically inheriting properties and values, but we design them in such a way that they mimic superclass and subclass.

Summary

Like I said at the start none of this is an attempt to suggest html or css are object oriented languages. Neither is even a programming language. However the goals and benefits of object oriented programming seem to be largely in sync with the goals and benefits of modular (dare I say object oriented) design.

It seems reasonable to look for parallels so we can use what’s been learned about one to help inform the other. I tried to limit this look directly to html and css. Javascript does allow for object oriented programming and if we consider css preprocessors we can more easily make these connections.

I realize my look here is superficial at best, but I think there’s enough parallel to warrant a further and deeper investigation. Perhaps we can learn how to design websites more efficiently by looking to object oriented programming.

And if you can think of a better parallel with polymorphism please let me know.

The post Can Object Oriented Principles Be Applied To Web Design? appeared first on Vanseo Design.