How to write css using sass in BEM?

Question

css

Good evening. I am new to frontend, I made the site according to the layout and only after that I decided to get acquainted with BEM. (It would be better vice versa) I
wrote Css using the sass preprocessor and there I really liked the nesting, I sculpted it everywhere, that is, the css structure I got is the same as and in html +-. Now that I have learned more about BEM, I understand that nesting should not be used at all? Because it breaks the whole principle on which BEM is built. I also used a lot of id, which is also not true? do you need to replace them with classes so that you can safely copy blocks without id conflicts? And what's the best way to do it? create property sets and use them with @extend, or do you still set these property sets in classes?
I'll leave a link to pages just in case: https://shustart90.github.io/landing/
Another question on gitHub, if I create a pull request and share a link to it, will the person see the whole project or just the changes made? Can I show the project itself by sharing a link? https://github.com/shustart90/landing/pull/2
I apologize if the questions are completely stupid, it's important to understand everything.

Answer 1

What's the problem? Example html with BEM methodology:

<div class="search">
  <form class="search-form">
    <!-- Элемент `input` блока `search-form` -->
    <input class="search-form__input">

    <!-- Элемент `button` блока `search-form` -->
    <button class="search-form__button">Найти</button>
</form>
</div>

Here is the nesting