1. A dlaczego ma nie mieć sensu? Co dla Ciebie oznacza organizowanie wszystkich elementów w kilku {}? Chodzi Ci o zagnieżdżanie? Bez BEM, czy stosując inną metodologię chciałbyś mieć np w pliku SCSS coś takiego:
.navbar {
...
.menu {
...
}
.button {
...
}
}
?
Bo takie podejście nie jest zbyt mądre, a dość często to widzę u początkujących.
Dosłownie 3 - 5 plików różnych plików Sass i w nich są powrzucane przeróżne elementy, bloki itd i dość ciężko jest w takim kodzie się odnaleźć.
Ale można stworzyć sobie np plik button.scss, który według BEM byłby blokiem, a w środku coś w stylu:
.button {
position: relative;
display: inline-flex;
vertical-align: middle;
justify-content: space-between;
align-items: center;
padding: 1.1em 2.8em;
border: 0;
font-weight: 500;
font-size: .95rem;
line-height: inherit;
cursor: pointer;
transition: .3s;
&__icon {
display: flex;
color: get-color(white);
}
&--wider {
padding-left: 3.2em;
padding-right: 3.2em;
}
&--expanded {
width: 100%;
}
&--primary {
background-color: get-color(primary);
color: get-color(white);
}
}
To jest po części skopiowane z mojego obecnego projektu.
Tu masz i elementy tego bloku (button__icon) i jego modyfikatory. Nic więcej to buttona nie wrzucasz.
Ja akurat stosuje w pracy coś takiego jak ITCSS i według tego podejścia tworzę strukturę plików Sass, a taki button ląduje w komponentach, gdzie często mam ich kilkanaście, albo i kilkadziesiąt. Wbrew pozorom to nie utrudnia pracy, a mocno ją ułatwia.
Później pamiętam, że mam taki komponent i nawet nie szukam tego między plikami, a w Atomie akurat daje cmd + p, zaczynam wpisywać "but...", co od razu daje mi plik (pod warunkiem, że tai istnieje oczywiście). To samo z innymi plikami.
2. Myślę, że podając wyżej ITCSS rozwiązałam Twój problem. Plików Sass możesz mieć nawet i 100 różnych - nawet będzie Ci się łatwiej w nich odnaleźć :) ale podpinasz sobie je wszystkie pod jeden plik, np main.scss i to on jest "zamieniany" w css i ten właśnie jeden plik .css jest podpinany pod HTML.
3. Tak :)