08 Jan 2014, 09:30

[Book] Maintainable CSS with Sass & Compass

This week, a review of the book "CSS maintenables avec Sass & Compass" (in French), I recommend reading if you want to review / challenge the way you code your CSS files and introduce to Sass/Compass. It will require you have some knowledge of CSS.

Globally what I liked in the book is the author's pragmatism to give you tips and recipes to get your work done in a sustainable way. It's not about the CSS state of the art as in traditional book but more a collection of best practices to improve your CSS code and skills. The book will give you the required overview to understand what is said but only the required part to have a good overview of the CSS world when the book was published (June 2012 - more on this at the end).

You will see through the book :

  • How to "strengthen" your head section with the use of the right doctype and how it impacts the rendering in browsrrs, the use of Modernizr, how to reset style (with reset.css or  normalize.css) and of course, the charset declaration (unicode).
  • How to organise your CSS files (reset.css, layout.css, typo.css, global.css, forms.css, application.css AND print.css)
  • How to structure your code (code styling)
  • How to manage graceful degradation / progressive enhancements
  • How to build a library/portfolio with your main components to have a quick and global review of all your "widgets/components" to ease your regression tests at least
  • Introduction to the main CSS frameworks (at that time) and in particular OOCSS which provides more a methodology than a finalised product.
    • The idea behind OOCSS is to apply "Object Oriented Principes" to CSS ; thus you will split your code in two parts. What is about the "structure" and what is about the "appearence / look / skin" of your content. By structure, I mean size (height/width), margin/padding and position (fixed, absolute, relative). By skin, it will be borders, colors, font, images, etc. It aims also to separate container and content.
    • By doing this, you may write more html code as you will use two CSS classses to define one global behaviour (structure + look) but you will get a more flexible/reusable code.
  • Introduce to CSS preprocessors and Sass/Compass in particular. Such tools will help you to structure your code, validate it (when compiled to CSS), etc.
    • Sass provides you some variables (you define for example the color of your site in one place and then use the related variable when needed. If you need to adjust the color, you do it once for all) / function with arguments (ex : you can compute some formula like sizing items based on some criterion) /  mixins (a block of css code you can call/include where you want) / class inheritence to extend one CSS class from another one / ...)
    • Compass is to be seen as a meta framework for Sass. It will provide you some features (reset.css, pre-defined mixins, etc) and also a full toolchain (code validation, sprites management, concatenation, minification, etc.

So if  you need to build CSS coding styles, challenge the way you code CSS and introduce you to Sass/Compass and see what you can benefit from them. It's definitely the book to read. For a more detailled usage of Sass/compass, you may be interested by "Saas & Compass avancĂ©" (in French - not yet read but with very good feedbacks so far)

Nevertheless a V2 of the book is on going but not yet published. I will recommend you to wait for these new version as in the last 12/18 months, many things happened in the CSS world.

And yes, read the physical book instead of the ebook. Some pages are organised with some content face to face on two pages. When you read vertically from one page to another one, it does not fit as well in ebook.