# FINN's front-end rewrite with Object Oriented CSS

DevFeed: [FINN's front-end rewrite with Object Oriented CSS](<https://devfeed.tech/articles/going-all-out-with-the-strap-on-project-31966.md>)

Original publisher: [Read original article](<https://tech.finn.no2012/06/23/going-all-out-with-the-strap-on-project/>)

Author: espen

Published: 2012-06-23T18:32:28Z

Content type: article

Language: en

Sources: [Finn.no](<https://devfeed.tech/sources/finn-no.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Framework](<https://devfeed.tech/topics/framework.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [front-end](<https://devfeed.tech/tags/front-end.md>), [layout](<https://devfeed.tech/tags/layout.md>), [modules](<https://devfeed.tech/tags/modules.md>), [project](<https://devfeed.tech/tags/project.md>), [requirements](<https://devfeed.tech/tags/requirements.md>), [speed](<https://devfeed.tech/tags/speed.md>), [teams](<https://devfeed.tech/tags/teams.md>), [user-experience](<https://devfeed.tech/tags/user-experience.md>)

## AI overview

FINN describes rewriting its entire front-end tier with Object Oriented CSS (OOCSS) to address duplicated, inconsistent, and excessive CSS that slowed page loading and rendering. The approach uses reusable modules and abstractions for HTML and CSS layouts.

## Source excerpt

In January we started on an ambitious project called "the Strap-on project". The infantile name aside this project is about rewriting our entire front-end tier using Object Oriented CSS (OOCSS), written by Nicole Sulivan, as the secret sauce to achieving the desired results. Why OOCSS? At FINN we have teams grouped by business units and all of them have developers who contribute with code on our site. This is provided us with a head ache with CSS, because there are no clear idioms for how to best write CSS. In our case this had cause teams to create their own "islands" of CSS by using # trails, train wreck selector classes and !important-wars. Teams had duplicate CSS for the same layout and we had a hard time keeping the user experience consistent across different parts of our service. We had way too much CSS code in total and we sent loads of CSS on each page request with just a small percentage actually being used. This made page load slow and rendering slow. Page rendering speed is equal to money, so we had to change something. OOCSS - making CSS coding a thing of the past OOCSS is a framework on which to build your own. It provides with a base set of modules and concepts which is essentials to building stuff in HTML with CSS. Grids, modules, lines, etc. These base modules provides an abstraction on top of CSS which makes authoring of CSS a thing of the past. In order to layout basic pages all we do is to use the building blocks and put together what ever you want. Basic boring stuff such as clearing and the box-model is no longer anything you need to worry about, it's taken care of. This enables developers to focus upon fulfilling business requirements instead of battling CSS differences in browser time and time again. Why not LESS, Compass or stuff like that? The CSS language abstractions that exist out there are all very cool projects and make a whole lot of sense to use for a lot of projects. However, in our case choosing one of these tools right now would no