Как сделать это в методологии rscss?

Question

[Islam Ibakaev]

Недавно познакомился с rscss. Немного смущает, что я только могу достать дочерний элемент. Как это переписать в rscss, как правильно достать .link?

Answer 1

[Ivan Bogachev]

Ну вообще-то можно не только дочерний - rscss.io/css-structure.html#avoid-over-nesting, но если вы хотите избежать такой вложенности в CSS, то можно просто сделать ссылку с оберткой отдельным компонентом, как-нибудь так:

nav.main-navigation
    ul.links-list
        li.wrapped-link: a.link(href='') Link
        li.wrapped-link: a.link(href='') Link
        li.wrapped-link: a.link(href='') Link
        li.wrapped-link: a.link(href='') Link
        li.wrapped-link: a.link(href='') Link

.main-navigation {
    // ...
}

.links-list {
    display: flex;
    justify-content: center;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}


.wrapped-link {
    flex-basis: 20%;
	
    > .link {
        display: block;
        padding: 15px;
        text-align: center;
        text-decoration: none;
		
        &:hover,
        &:focus {
            text-decoration: none;
            background-color: #333;
        }
    }
}

Comments

[Islam Ibakaev]

В моём примере .nav-menu__link не является дочерним элементом .nav-menu и тем не менее мне нет нужды выделять li в компонент. То есть в бэм компонент может иметь потомков.
Здесь же нужно li выделять в отдельный компонент, ибо по-другому через селектор > не дотянутся. Выходит что в rscss компонент не может иметь потомков, а только дочерние элементы?

[Ivan Bogachev]

Islam Ibakaev: Да, в rscss все строится на дочерних элементах или, в крайнем случае, дочерних элементах дочерних элементов (как в примере по ссылке в ответе). Т.е. можно еще сделать что-то такое:

nav.main-navigation
    ul.links-list
        li.wrapper: a.link(href='') Link
        li.wrapper: a.link(href='') Link
        li.wrapper: a.link(href='') Link

.links-list {
    // ....

    > .wrapper {
        // ....
    }

    > .wrapper > .link {
        // ....
    }
}

[Islam Ibakaev]

Ivan Bogachev: просто интересно насколько такой подход гибок. ты уже использовал эту методологию в проектах? доволен ли ею?

[Ivan Bogachev]

Islam Ibakaev: Да, постоянно использую и вполне доволен тем, что получается. Тут главное - не пытаться намеренно усложнять происходящее, добавляя избыточные контейнеры для элементов (иногда вижу, как люди на каждую кнопку делают по 2-3 обертки). Чем проще разметка - тем лучше.

[Islam Ibakaev]

Ivan Bogachev: ок, спасибо за помощь)