CSS Command Centers (#CCC) is an organizational framework you can use to leverage the power of object-oriented CSS concepts in your projects.
Traditionally as designers / developers, we haven't architected CSS in an object-oriented way, as we may have with other front-end tools, such as JavaScript. As a result, our CSS may become fragile - code that is too closely attached to IDs and can't be used elsewhere. Or even worse - repetitive, loosely structured, re-use unfriendly code that is a resource-drain to maintain.
CSS preprocessors offer components that make it easier to infuse object-oriented concepts into CSS, but it also helps to have a definite, overall structure to keep everything organized. Just as we might use an organizational framework like Backbone to lend structure to what may otherwise be spaghetti custom JavaScript code, we can use a framework like #CCC to organize our custom CSS.
#CCC leverages DRY (don't repeat yourself) principles where possible - and endeavors to make your CSS more manageable, scalable and modular with reusable components.
#CCC also strives for maximal flexibility by having no hard file dependencies. By utilizing Sass partials, you choose à la carte which #CCC components or external components to include in your project. Want to use #CCC's grid? Use the import directive of Sass to add CCC's grid partial into your project. Don't need #CCC's grid system? Easily switch it for Susy, Bourbon Neat, or anything else better suited for your project.
Above all, Command Centers are used extensively as hubs in your codebase to manipulate specific, sweeping aspects of CSS - colors, grids, typography, breakpoints, etc. - instantly.
- Make powerful concepts from OOCSS and SMACSS actionable
- Get a project started faster, by using (your own) modular, reusable structures and components across projects
- Complete projects with greater accuracy, predictability, control and organization
- Greater CSS maintainability over the longer-term for growing projects
- Avoid having to recreate similar CSS overhead from project to project
- Make sweeping changes to layout, colors, grids, breakpoints, etc. in a single, immediately accessible section of code
- Provide structure for creating commonplace modules of CSS: colors, grids, typography, layout, etc.
- Easily integrate popular HTML/CSS components (Normalize.css, HTML5 Boilerplate, Font Awesome, etc.) into a flexible, responsive framework
- A simple, overarching mental model to consider code for building responsive designs
- Offers simple terminology that labels common concepts in responsive design that don't have official HTML/CSS names so team members can communicate more accurately
For more information, please visit CSS Command Centers.