The Front-End Redesign Process
The redesign for this platform had a few very specific requirements, and a clear goal. Here's how I identified and attempted to meet those goals…
“No F***ing Workarounds”
Rule number 1 for rebuilding the front-end of this platform was that we're not living with anything sub-standard. If something wasn't working quite right re-do it correctly. As a result I scrapped all of the old CSS in favour of a complete re-write.
“HTML structure that makes it easy to reuse and combine elements”
Another key to this development was to make the markup make sense. It may not be perfect SMACSS, but the classes and functions are predictable, and require minimal markup to realize new features while still retaining a crisp and polished look without too much "style bleed" from more generic class names. (e.g. .half for grid sizing, .button for buttons).
I took a page out of modernizr by using .no-js on the <html> element, and replacing it with .js. This allowed me to selectively hide and show required elements (like submit buttons on JS autosubmit forms) with .js-hide and .no-js-hide. It's a little detail, but required some extra thought.
Flexible and mobile friendly
This wasn't built "mobile-first" like you may have seen before, but it wasn't meant to still work on smaller screens. This was done by hand, just looking for break points and adding media queries where necessary. Nothing fancy here. :)
Open Source and Accessible
We decided to eschew a CSS preprocessor to allow others to contribute and tweak without having to know how SASS or LESS or stylus works. This was actually pretty interesting because it forced me to really think about how classes are used, when to include parent selectors, and 'manually @extend' to keep the code maintainable as times goes on.
A Happy Medium?
I tried to find a good balance between having a rock-solid CSS platform and staying loose enough to make it easy for others to write in new features that look great. I'd really appreciate your input on how you think it all came out. There are probably a few bone-headed moves in there somewhere, but hopefully it's easy enough to understand that you'll be able to spot where it went wrong.