CardStock is a new approach to writing and maintaining large CSS codebases, such as the ones in Review Board and other Beanbag products.
It applies the same philosophy of HTML/CSS’s semantic/style separation to CSS. It decouples selectors from styling, and emphasizes reuse of components, through the use of schemas and interfaces.
It’s not a HTML generator, and it doesn’t impose styles. Instead, CardStock aids in helping you think about how the DOM of individual components of your page are structured, designing them like you would APIs in a project.
It takes the best parts of our CSS/LessCSS Coding Guide used for Review Board and gives us tools to help think of CSS in terms of reusable components that can be extended, like an object in programming.
Let’s explore what all that actually means in practice, and how this can benefit a codebase.
<aside> 💡 This document and design is a work-in-progress.
</aside>
CSS can be pretty unwieldy at times. It doesn’t take long for stylesheets to become overly complicated and disorganized, for styling rules to begin to collide with one another, and for nesting levels to increase.
There are approaches to keeping rules from colliding, and keeping nesting levels flat. Approaches such as BEM, BEMIT, and our own CSS/LessCSS Coding Guide (which builds upon the best of both), which helps standardize the naming of CSS classes and keeping related rules organized.
But there were still issues to solve: