I’m sold on the benefits of using Nicole Sullivan’s Object-Oriented CSS philosophy/coding methodology/whatever. In particular, I’m keen to use principles such as the “media block” in the sites I’m building at the moment.
However, it comes bundled with a liquid-style grid system and our designers are currently building to a strict 960 grid width system. The 960 grid system uses a fixed 12 or 16 column layout, each consisting of either 40 or 60 pixels. OOCSS seperates a layout into fluid divisions of 1/2, 1/3, 1/4 or 1/5 portions.
960.gs has inherent “gutter” margins built in between columns at 10px each. OOCSS has no margins between columns as they can be any width and instead the margins are provided between content elements so as to seperate content and container.
Is it a bad idea to mix and match the best of both these 2 frameworks into our company CSS boilerplate? Does the fluid nature of the OOCSS grid framework make it poorly suited to a rigid 960 page width? We’re using the HTML5 boilerplate as well.
I’m asking this as I have already found that when trying to incorporate certain frameworks with OOCSS (such as SASS) that two approaches can be orthagonal toward each other and it’s better to just pick one and stick with it – but this may not always be the case.
The main advantage of a grid system is that it gives a visual unity to your page — you have consistent divisions throughout. I would hesitate to use two different grids, because that would mean you are working to two different sets of lines, resulting in a far less consistency. Additionally, if these grid systems were not built to work with each other, mixing them might have surprising effects for some edge cases (or even normal cases). You don’t want to run into that after a month of working on a project, and have to tear one or the other out.