Object oriented css; or how to make reusable structures for basic components

By | December 4, 2013

For our first blog post, I’ve decided to delve into object oriented CSS. Why? OO-CSS allows for less code duplication, quicker editing, and overall less errors. Sounds good right?

Let’s design a triangle class. This is going to be the base for all triangles we have in the future, so we just include what is needed.

We set the size of everything to 0, but why add a border? We will be using the “border trick” to create our triangles- and black is a fine default. We will come back to overriding the color and size later on.

So lets see what we have so far:

Not much of a triangle, eh? Lets add some classes to complement our triangle, we will have ones for each cardinal direction.

Ok, that looks like something. So what is going on here? Take a look at .triangle.up. This creates an upward facing triangle. We remove the visibility of the left and right edges, and completely eliminate the top edge. This, due to how browsers render borders will create a real triangle. Take a look:

Beautiful. We are able to take a base class, apply transformations to it, then get a different result. Look at the varying classes, do you spot a pattern with them? The main point of this is the ease of writing. Just think if we were to make a .triangle-up class instead. We would end up writing much more code to display the different angles of view.

We can improve on this, although it requires better support from browsers to be used currently. Lets do the same thing, but just applying transform properties on the subclasses. transform allows us to do 2d rotations, so we can keep the initial shape and just spin it.

Do you see how we just implemented what was in .triangle.up into the base class, then used further classes to rotate it? This will end up a slightly different result, as positioning is not taken into consideration when rotating. Save this idea for about a year down the road, CSS3 greatly improves the speed of development.

Anyhow, moving onwards. We can create triangles pointing in different directions by just adding a subclass to triangle.

NICE! Now, what is the right way to change the color? What is the usage of our triangles? We should not concern ourselves with minutia, we want triangles to be able to be used for menu’s, for indicators, for breaks in text. Whatever we want. Therefore, we will create subclasses to alter our triangle again. There is something to note here; CSS overwrites all previous declarations whenever it is found, and a more advanced feature: specificity aka the CSS point system. I’ll talk a little about the latter as it is slightly more complex, but generally you will get the feel of it without busting out your calculator. Both of these things are really one in the same, but I tend to view them as separate features.. to each their own! In a nutshell, the more specific a selector, the more preference it will be given when it comes to conflicting styles.

I’ll list the point system in case you are curious, don’t concern yourself too much with it.. but it is good to know!

  • ID selectors are highest; think of 100
  • class selector are next; think of 10
  • HTML selector are lowest; think of 1

Add this together, and you get CSS points. These vary across implementations so there is not a cut and dry number. Try not to get a high score. A good rule of thumb is to minimize selectors as much as possible, but not so much that it impedes you. A fine line.

So using this knowledge we will subclass out triangle to deal with “notice” triangles. Perhaps they could be used to draw attention to something, just as the name implies.

Notice the positioning of where .triangle.notice is placed. We could put it directly under .triangle, but we cannot put it under .triangle.[up,left,right,down]. Why? It will overwrite all of their styles, making your triangles… weak!

Cascading turns the above into:

Great! Lets take a look at our triangle now:

I’ll leave further modification for you to play around with. Try playing with width and height a bit to understand why they are 0- you can make new shapes.

Circles are cooler

Lets move on to circles, and explore a different type of subclassing.

For this we will be using/exploiting the border-radius property. border-radius is used to add nice rounded corners. We set it to 100% to make.. completely rounded corners, and alas- a circle.

Notice how width, height and background-color are set. On a website you likely wouldn’t have these properties set as the base of your circle class, but rather- as subclasses designating out various shapes, colors, and sizes. For this example, for brevity we will keep it at that.

Handsome. We can apply oop techniques to make a variety of circles from this. Lets do a raindrop one.

So, we apply a radial gradient starting very blue and getting lighter outwards. A simple shadowing of blue surrounds it as well. We keep background-color in case someone is using a browser that doesn’t support radial gradients yet. Always make sure that even if they cannot see exactly what you envisioned, they can see something close! This is important in all of design as well, not just html. People who have trouble seeing should not be excluded!

Not the best looking, but it works. We can easily create a ton of variations of a circle based off of this one class. And that is the point, we can make fiery circles, or grassy circles. All without having to redefine a circle each time!

So, lets turn it into something useful (and new). Lets make it a growing circle. This will only work with newer browsers, but if done carefully can be used to add function while not excluding others. It can be used to signal this circle is clickable for example. You should always do browser testing, and if the browser cannot handle this consider using a different background color or similar to appease them. Foundation framework deals with this nicely by having ie classes based on versions on the html element.

Lets do it!

So, we’ve added a grower class. This will allow us to change the size of the element when a pseudo-element is applied: such as :hover, or :active. And a clickable class, this combined with grower allows for a smooth transition to a larger size.. or if that is not available- a quick move to 120 by 120.

Lets see our raindrop in action:

Move your mouse over it? Nice! With an icon we could have a nice circle button that grows.

What is cool about composing classes this way, or “not so tight coupling” is that we could apply grower and clickable to other objects if we so please, creating a interface rather than random assortment of code. Much cleaner, much more maintainable, and much less error prone.

To finish up, lets apply these ideas to triangles:

Ok cool, same basic idea. Do you see how we had to rewrite .triangle.grower from .circle.grower though? There is an optimization to be made.

We now just have grower determine that we transition all changed elements it can. Neat. You can and should subclass grower to perhaps have a different amount of time for triangles rather than circles, but that is up to you.

Lets see a final product:

Here is the full code in case you want to use it; feel free:

That wraps our first post. Hope you enjoyed it!

Further reading: