Site Modules vs. Library Modules with BEM and SMACSS

Question

Here's a situation I run into a lot with CSS architecture using BEM/SMACSS. I'd like to see how other developers handle it.

You have a library of CSS modules that you use across multiple sites. Modules like .btn-group, .nav-tabs, etc.

Then you encounter a module that's styled in a very site-specific way -- it's too unique to be able to use one of your library modules.

So you have the code for that "site module" in a Sass/Less file and you save it with the other style code for that site, like the layout styles. It's not saved with your "library modules."

My question is: do you do anything to distinguish the "site module" from your "library modules"?

Answer 1

I usually follow YAGNI principle in CSS which helps making decisions in these sort of circumstances. Following always implement things when you actually need them, never when you just foresee that you need them approach a new module starts its life as a site module. Whenever I need to use that module in more than one site then that is the moment I consider turning it into a library module.

Answer 2

This issue is solved with the help of Levels of Definition. The main idea is that you can split blocks (even parts of the same blocks) into different layers which you combine on a project. E.g. you can have library level (or a few of libraries) and a project level or it could be different levels according to environment: common parts for all the platforms and different ones for desktop and tablets and so on.

See http://bem.info/method/filesystem/ for more details.