Can oocss and sass implemented on the pre existing web applications

[gagrawal]

Hi All,

Need every one suggestions out there.

I my company I have been asked to use the OOCSS and SASS on our product. It was created around 6 years back and lot of people have worked on it. Now I have been asked to use OOCSS and SASS on the portal.

As per my understanding its not possible to get it implemented on the current code. Need suggestions and input from all you friends how to proceed.

Thanks,

[parkerault]

No one can help you if you don't post a link to the source, but if the product is 6 years old and has been worked on by many contractors, it is likely you will need at least several months of full time work to refactor it.

[gagrawal]

Thanks, 

I cannot share the code publicly :( since its a secure application.

Even I realized that will require lot of effort and have to work on the application module wise. Also as per my understanding have to rewrite the HTML code.

[parkerault]

The CSS is unlikely to compromise the security of your application.

[Lars Olof Berg (Gmail)]

Hi gagrawal,

You can definitely take the benefit of SASS even in an "old" product. Regarding OOCSS it's a trickier question. 

IMO, one of the central questions is how to handle the Modules/Components/Blocks (many names...) and their extensions. Nicholas Callagher summaries this in a good way in http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ - scroll down to "Component Modifiers".

There are two code patters: 

1. The "single-class" pattern.

2. The "multi-class" pattern.

For both patterns OOCSS applies. In the single-class pattern it *may be* possible to accomplish at least some OOCSS thinking in existing html, but you *must* use a preprocessor (SASS) to structure your modules and extensions. The multi-class patterns definitely requires that you touch your html (but you don't *need* SASS).

My 5 cents without knowing anything of your situation and code, but... ;)

Cheers,

-- lars olof

[gagrawal]

I have attached a style sheet file for reference which we have been using in the portal. there are similar 4 more stylesheet used in the portal.

[mobywhale]

From my experience, if a site wasn't built in modular way, then it's hard to implement OOCSS without changing existing code. 

Looking at your CSS briefly, it seems like there are a lot pages/sections specific styling. One of the main OOCSS principal to separate container and content. I think the first thing to do is to analyse your site and work out the design styles (commonly used colours, font sizes for headings, list styles etc) and components (navigation, dropdown, meda block). If you have a lot of different styles (e.g. > 6-7 different font sizes and colours, many different list styles), then it might be a good idea to look at the design of your site and see if it's possible to cut down on the less used styles. This will help you cut down on CSS and avoid having to write section specific styles.

As for SASS, there's currently a work in progress oocss-sass branch: https://github.com/stubbornella/oocss/tree/oocss-sass

So you can take a look to get some ideas how SASS is used with OOCSS.

Hope this helps!