Sass and CSS style guide
Authoring Sass and CSS still feels like the old days: talk to 10 different web designers, and you’ll hear 10 different ways of organizing your front-end code. This is a good thing and a bad thing: we all can do what works best for each project, yet the web design community at large is certainly not on the same page on how to best do things.
Over the past few months, I have been working on my own Sass and CSS style guide.
Like everything in the Playbook, I plan on refining and sharing improvements as I learn and improve my craft.
Selected tools and processes
As of 2014, these are the tools and processes that I prefer to work with:
- Sass preprocessor
- Compass Sass framework
- ZURB Foundation framework
- SMACSS methodology
- Ruby on Rails Asset Pipeline for web apps
- CodeKit for static HTML websites
It seems like everyone I talk with who nerds out about front end code subscribes to newer methodologies like BEM and OOCSS, but I find many of them to be too cumbersome and verbose. I find the much simpler SMACSS to be good enough for my purposes.
Check out my full Sass and CSS style guide for more info:
- Folder structure
- Asset manifest files
- General formatting
If you’re looking for more ideas on how to construct your own style guide, I found these 2 blog posts to be interesting: