A colleague of mine who leads the html/css development for our site now has proposed something I'm looking for opinions about.
We're currently designing new page templates for our site, using lego-block style OOCSS component library/styleguide of objects - invariably what we are running into is that for a specific area of the page where we are placing an object like a button, or media objects, etc, we tend to need overrides on the default spacing or layout, due to the number of variations of page templates we need (yes, fewer page templates are our goal, but we still need a fair number of unique ones) - i.e. we need the object to have a little more margin or padding or floated left vs. right etc in one section of a page template vs. another. This has made it necessary to add spacing helper classes to our markup in some cases, which is frankly starting to look ugly, and is going to drive markup changes constantly as we update the design of the page templates going forward.
One thing he has suggested is adding a class for each major "chunk" of the page template, so that we could apply location-dependant padding/margin/layout type overrides to specifics object within that page chunk. Now while it could take a bit of work to figure out what level these classes should be at (i.e. how many page template "chunks" should have classes, how big are these chunks, etc) but we think this is doable. Bear in mind we are not using SASS or LESS or any of these types of tools currently because our dev team is simply not up to snuff on them yet, so we're looking for a solution that just uses plain CSS (
i.e.no "mixin" type solutions).
Conceptually I think this does make sense since it we are somewhat separating the "object", which should be an encapsulated thing with the best defaults you can come up with (i.e. a single blue button with text), from the layout/position of that object within the page template/section - which is already likely to be affected by the page markup and it's position within the document (i.e. source order, adjacency to other objects, etc). Having these parent classes would allow you to target that object with different spacing etc if you needed it without having to add individual helper classes to each specific object, and filling your page with "mvn", "mbn", "ptl" which is where we are at currently.
What are your thoughts? thanks,
Rick