0

I have started updating my styling side wide to BEM. So far I am loving it, but I am having an issue separating the scss into a correct directory structure. BEM takes care of my naming conventions for my classes, but I wanted to try and get some order of why I am storing my scss.

I thought about two things, the directory structure could be separated by Component but maybe this doesn't fit well BEM considering there is not a 1 to 1 mapping between block level elements and components.

I presume there will be some sort of structure for storing _base, _variables, etc?

halfer
  • 19,824
  • 17
  • 99
  • 186
Martin
  • 23,844
  • 55
  • 201
  • 327

1 Answers1

2

I'd recommend sitting your component files next to each other, like this;

├── src
|   ├── _modules              
|   |   └── link
|   |       ├── __tests__
|   |       |   └── link.spec.js
|   |       ├── link.html
|   |       ├── link.js
|   |       └── link.scss

Which does fit very nicely with BEM way of thinking. I think the no 1 to 1 mapping you're talking about is the concept in BEM that you shouldn't try and replicate the DOM in your CSS. Anything that doesn't belong in a component folder, can live in a "core" component.

There's a very good Yeoman generator called Yeogurt https://github.com/larsonjj/generator-yeogurt that builds this type of structure (as well as a bunch of other things) for you.

LWilson
  • 444
  • 2
  • 11
  • 1
    What would the contents of link.html be, hypothetically? – ESR May 25 '17 at 04:26
  • 1
    @EdmundReed this is the template HTML that makes up the module. So, this might look like: `{{name}}` If you were using mustache templates Note, that Yeogurt uses jade (now pug). – LWilson May 25 '17 at 04:39