-1

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"?

cantera
  • 24,479
  • 25
  • 95
  • 138

2 Answers2

2

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.

katranci
  • 2,551
  • 19
  • 24
  • Thanks for responding. Do you find it useful to distinguish it while it's still a site module? For example, classing it as `.site-module` rather than `.module` to help you locate the source code and avoid conflict with anything in your library that's also named `.module`? – cantera Apr 10 '14 at 16:11
  • If that site module is loaded along with the library modules then namespacing is necessary to avoid collisions. It would help to have a style guide / naming conventions especially for creating library modules so that you can distinguish them easily. – katranci Apr 10 '14 at 17:24
0

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.

tadatuta
  • 2,007
  • 11
  • 12