このウェブサイトのSassファイル群はずっとフラットなファイル構成でやっていた。主にSassが相対パスの修正を行うことができないことが理由だったけど、最近はポストプロセスすればどうにでも出来そうな感じなので、あまり気にせず整理することにした。単純にカテゴリ分けするだけでも良いのだけど、BEMを応用してやってみている。 CSSのクラス名及び変数やプレースホルダー・クラスにはまだ手を付けず、まずはBEMツリーとルールセットの配置の対応を作るところから始めた。 ファイル名でブロック ディレクトリでブロックのネスト セレクターの1段階のネストでエレメント &を使ったセレクターのネストでモディファイア 以上のようなルール付けの元にやってる(未完成)。 ブロック scss/ ├ _header.scss └ header/ ├ _logo.scss └ _site-navigation.scss ファ
![BEMを使ったSassファイルの整理](https://cdn-ak-scissors.b.st-hatena.com/image/square/f2fda417d491d805f79065104db5f50e11015215/height=288;version=1;width=512/https%3A%2F%2Fhail2u.net%2Fapple-touch-icon-precomposed.png)