Как правильно писать css c помощью sass по БЭМ?

Question

[Shu90]

Добрый вечер. Я новичок в frontend, сверстал сайт по макету и только после этого решил ознакомиться с БЭМ.(лучше бы наоборот)
Css писал с помощью препроцессора sass и там мне очень понравилась вложенность, везде ее лепил то-есть структура css у меня получилась такая же как и в html +-. Сейчас узнав больше про БЭМ я так понял вложенность вообще использовать не стоит? Тк она ломает весь принцип по которому строится БЭМ. так же я использовал очень много id что тоже не верно? нужно их заменить на классы что бы можно было спокойно копировать блоки без конфликтов id? И еще как лучше делать? создавать наборы свойств и использовать с помощью @extend или все таки задавать эти наборы свойств в классах?
я оставлю на всякий случай ссылку на pages: https://shustart90.github.io/landing/
Еще вопрос по gitHub если я создаю pull-request и делюсь ссылкой на него увидит ли человек весь проект или только внесенные изменения? Могу ли я показать сам проект поделившись ссылкой? https://github.com/shustart90/landing/pull/2
Извиняюсь если вопросы совсем глупые, важно это все понять.

Comments

[Ankhena]

и там мне очень понравилась вложенность, везде ее лепил то-есть структура css у меня получилась такая же как и в html

Так делать не стоит ни в CSS ни в препроцессорах.
Большая вложенность приводит к повышению специфичности, а значит, к потенциальным проблемам при переопределениях.
БЭМ как раз заметно сокращает потребность во вложенностях.
Если у вас есть элемент .block__elem, то уже и так понятно, что он лежит в блоке .block и больше нигде.
Это #details-bouncy #details-bouncy-markers div, конечно жестоко. Вы попросили браузер найти сначала все div на странице, потом проверить лежат ли они в #details-bouncy-markers. Это уже не лучший ход. Так потом ещё нужно пойти выше по дереву и проверить, лежит ли это всё в #details-bouncy.
Вместо этого можно было бы задать одинаковый класс этим div и использовать простой селектор типа .class {}. Ну или в БЭМ версии .block__elem {}
Ну кроме того, что эти картинки вообще не контентные, а украшения. А украшения делают фонами и/или псевдоэлементами с помощью стилей.

так же я использовал очень много id что тоже не верно?

id для стилизации используют очень редко, во многих кодгайдах это просто запрещено. id нельзя переиспользовать на той же странице и опять таки повышение специфичности.

p.s.
1. Вы смотрели свой сайт при ширине окна больше макетной? Есть прелюбопытные моменты.
2. Высоту в верстке задают очень редко. Мы никогда не знаем сколько будет контента. Используйте отступы и/или мин макс высоту, если она зачем-то нужна.
3. Не забывайте проверять код валидатором.
4. <h2>O U R&nbsp;&nbsp;&nbsp;S E R V I C E S</h2>
В разметке текст хорошо бы писать так, чтобы его нормально могли прочитать экранные дикторы. Представьте, как может быть прочитан вот этот.
Для увеличения расстояния между буквами есть свойство letter-spacing.
5. Ну и т.д. про семантику, контентные картинки и украшения, лишние теги... Хватит пока.

А для гитхаба сделайте отдельный вопрос, не стоит мешать всё в кучу.

[Shu90]

Ankhena, Огромное спасибо! Спасибо за ваше потраченное время!

[Shu90]

Александр, спасибо! Это тоже переделаю значит. Про нормалайз спасибо за информацию)

Answer 1

[ArturMavlidov]

А в чём проблема? Пример html с методологией БЭМ:

<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>

Вот и вложенность

Comments

[Shu90]

То есть и с sass можно задавать стили таким образом и это не влияет на БЭМ?
.search
    .search-form
         .search-form__input
и нужно ли так делать? Ведь стили для класса .search-form__input будут работать только когда он в блоках .search и .search-form и просто забрать оттуда этот элемент не получится
или нужно просто
.search

.search-form

.search-form__input

[ForSureN1]

.search
.search__form
.search__form-input
.search__form-textarea
.search__form-submit
и т.д

[Shu90]

ForSureN1, у вас в качестве модификатора выступает элемент, так можно делать?

[ForSureN1]

Shu90, да, извиняюсь, напутал немного, правильный вариант выше указали вам.
Но и мой вариант имеет место быть

<!--
            Рекомендуется:
            `search-form__button` или `search-form__content-button`
        -->

[ForSureN1]

Shu90, Да и к тому же модификаторы выделяются одним "_" вместо "__" а не "-"

[Shu90]

ForSureN1, о, спасибо, я значит где то увидел неверный вариант написания модификатора, спасибо что обратили внимание!

[ForSureN1]

Shu90, https://ru.bem.info/methodology/quick-start/ вы посещали этот сайт?)

[Shu90]

Да, давненько, а вчера решил глянуть видео урок с разборои бэм какой то и там был неверный синтаксис модификатора, да лучше оф документацию перечитаю

[ForSureN1]

Александр, Ну да, это и имею ввиду, но я стараюсь пользоваться такими вложенностями как можно реже, так как чтобы потом перебить какой то стиль в другом месте, придется к такой же цепочке из классов обращаться.
С формой данный случай думаю уместен, но если рассматривать другие варианты..

[ForSureN1]

Александр, получается первый вариант правильнее чем второй ?

.search {
    // .search__form
    &__form {
        &-input {
            color: red;
        }
    }
    // .search__form-input
    &__form-input {
         color: red;
    }
}

[ForSureN1]

Александр, возможно вы неправильно поняли меня, я имел ввиду именно сам синтаксис SASS/SCSS, про роль БЭМА я понимаю, и пользуюсь этим, а про

платят за удобство при разработке размером бандла.

не совсем вас понял

[ForSureN1]

Александр, Теперь понял вас