SCSS：Bemおよび推奨ディレクトリ構造

Question

私はスタイリングサイドをBEMに更新し始めました。これまでのところ、それは気に入っていましたが、scssを正しいディレクトリ構造に分割する際に問題が発生しています。 BEMは私のクラスの命名規則を守っていますが、私は自分のscssを保管している理由を何とかしようとしました。

ディレクトリ構造はコンポーネントで分けることができましたが、ブロックレベルの要素とコンポーネントの間に1対1のマッピングがないと考えると、BEMにはうまく適合しない可能性があります。

誰かがいくつか推奨することができますか？

私は、_base、_variablesなどを格納するための何らかの構造があると想定していますか？

Answer 1

コンポーネントファイルを隣り合わせに置くことをおすすめします。

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

BEMの考え方にはうってつけです。私はあなたが話している1対1のマッピングはBEMのコンセプトで、あなたのCSSでDOMを試してみてはならないと思っています。コンポーネントフォルダに属していないものは、すべて「コア」コンポーネントとして使用できます。

Yeogurt https://github.com/larsonjj/generator-yeogurtという非常に優れたYeomanジェネレータがあります。このタイプの構造（他にもたくさんのもの）が構築されています。