You’re CSS is ugly! You know it, your co-workers may know it, and your boss probably doesn’t care but you are a professional and its time to start styling like one. But where do you begin? If you’re like me you’ve gone through the thought process of: should each page have its own style sheet, should I include a reset.css/normalize.css file, how many classes/IDs should I use in a selector, how guilty should I feel for slapping ‘!important’ on a style to make it work? These and many more questions plagued me especially for large projects with thousands of lines of CSS. There had to be a way to organize the styles in a way that not only made sense but followed a given structure and improved maintainability. After spending several years reading various text books, e-books, online tutorials, and countless blog posts I found SMACSS (Scalable and Modular Architecture for CSS) by Jonathan Snook.
Upon my first read of the e-book I knew I had finally found someone who thought like me. Someone who said there had to be a better way than just shoving new styles at the bottom of an ever-growing CSS file. As I went to work the next day my head was filled with the glory of personal ambition that “today all my CSS will be perfect!”.
Let me share with you…it did not occur. If I am totally honest with myself the CSS I produced that day was in fact no better than it was pre-reading SMACSS. But the difference was this: I now knew I was doing it wrong and could see how it should have been done. Over the next several months I found myself consciously grading not only my CSS but any CSS that I had to work with no matter its source. I let my mind process web pages differently, no longer seeing how things are currently styled but how things should be styled.
Once those concepts had more fully taken root I knew it was time to throw myself back into learning mode. What followed was a TutsPlus course and some YouTube searching. I’ve gathered the three best sources (listed below) that I have found for anyone wanting to improve their CSS and as a related result their use of classes/IDs & HTML.
If you find that you have questions on SMACSS or CSS in general feel free to drop me a note via the contact form in the footer.
Read the book
https://smacss.com
Perhaps in your computer career you’ve heard the acronym ‘RTFM’? Well, Jonathan Snook literally wrote the manual on SMACSS. It is a guide to one of the best ways to organize CSS for any sized web project.
Watch and Learn
For those of you that prefer a video to reading the book or if you want to get a taste before committing to the standard you can watch the author give a great review touching on all of the book’s major points.
Take a Course
The TutsPlus group offers an excellent course to get started improving your CSS organizational skills. If you have a TutsPlus subscription the course is free otherwise it is simply $25. I’d personally recommend getting an annual subscription instead as this opens up all of their courses. At the current pricing structure that equates to $15/mo which is well worth it for continuing education purposes.
Introduction to SMACSS on TutsPlus
Note: I receive no compensation nor affiliate credit for use of the above links…at all. I simply know how awesome SMACSS is for front-end developers and am sharing this with you, the reader.