Resources For Modularizing Your CSS
In my previous article on SMACSS: Notes On Usage, a lot of research went into making it possible. I knew that a more modular approach to writing CSS was something that needed to be pursued, but it took a bit of effort to make that change. In fact, if you poke around in the source code of this site, you can see where it begins to transition from old conventions to the modular approach.
Here is a list of resources that helped give me a better understanding:
- The Future of CSS: Embracing the Machine
- Inayaili de Leon—The Mechanical Revolution (video)
- Our Best Practices Are Killing Us
- Object Oriented CSS Video On YDN
- An Introduction To Object Oriented CSS (OOCSS)
- SMACSS: Scalable and Modular Architecture for CSS
- Shop Talk Show—001: With Jonathan Snook
- BEM Method
- A New Front-End Methodology: BEM
- How to use BEM! outside Yandex (video)
- Is It Time To Change Our CSS Practices?
- CSS for Grown Ups: Maturing Best Practices
- Keep Your CSS Selectors Short
- The Single Responsibility Principle Applied To CSS
- The Open/Closed Principle Applied To CSS
- Open/Closed Principle
- Scalability
- Modular Design
- Scope CSS Classes With Prefixes
- Bootstrap, from Twitter
- Foundation by ZURB
- Idiomatic CSS
- Normalize.css
- MVCSS
- One Module Or Two
- Putting The Pieces Together
- Harry Roberts—Big CSS
- Using OOCSS, Sass and Media Queries
- SOLID CSS
- CSS-Style: A CSS Style Guide
- SMACSS and SASS - The future of stylesheets
- Modular CSS and HTML5: Organize the Chaos
- Thoughts on BEM for inuit.css
- inuit.css
- suit-utils
- basis.css
- A Classless Class—On Using More Classes In Your HTML
- DRY CSS: A Don’t-Repeat-Yourself Methodology for Creating Efficient, Unified and Scalable Stylesheets
- Object Oriented Sass: A study into performance implications
Not only did I study anything and everything on OO/Modular CSS, but I also looked into other frameworks to see what approach those developers took. If you are thinking about making the change or are just looking for a better way to organize your CSS, I hope the links above help.
Cheers!