Могу ли я придерживаться OOCSS разделения контейнера и содержимого, когда стиль объекта должен зависеть от родительского контейнера?

Мой вопрос отличается от этого, но он касается того же принципа, поэтому эта цитата актуальна и здесь:

с https://github.com/stubbornella/oocss/wiki

По сути, это означает "редко использовать стили, зависящие от местоположения". Объект должен выглядеть одинаково, независимо от того, где вы его положили. Таким образом, вместо стилизации определенного h2 с помощью.myObject h2 {...}, создайте и примените класс, который описывает рассматриваемый h2, например, h2 class="category".

Но что, если дизайн диктует, что стиль объекта изменяется, когда он находится внутри определенных контейнеров? Вот упрощенный пример моей проблемы. Допустим, есть объект с именем foo и контейнерный объект с именем bar. foo и bar имеют свои собственные стили, не зависящие от местоположения:

.foo {
    ...
}
.bar {
    ...
}

Но когда foo находится внутри контейнера, его цвет должен меняться, когда пользователь наводит курсор на панель:

<div class="bar">
    ...
    <div class="foo">
        ...
    </div>
    ...
</div>

В этом случае кажется, что вы не можете избежать написания зависимого от местоположения селектора, который выглядит следующим образом:

.bar:hover .foo {
    // color style
}

Одно из решений, о котором я подумал, - это ввести класс, который явно зависит от bar (названный с использованием соглашения об именах BEM, чтобы явно указывать на отношения родитель-потомок), и добавить его в объект foo:

<div class="bar">
    ...
    <div class="foo bar__foo">
        ...
    </div>
    ...
</div>

.bar:hover .bar__foo {
    // color style
}

Я хочу подтвердить, это хороший способ справиться с проблемой? Есть ли в OOCSS и другие способы?

Источник

1 ответ

Здесь большая проблема не в том, что ваши классы объединены в цепочки, а в том, что ваши классы не зависят от местоположения. Гнездование произойдет. Такие подходы, как OOCSS, хороши тем, что помогают вам узнать, когда такие вещи, как вложение и присвоение имен классам, идут не так, как надо.

На прошлой неделе Марк Отто выпустил Руководство по кодам, и вот несколько важных моментов:

  • Держите селекторы короткими и старайтесь ограничить количество элементов в каждом селекторе до трех.
  • Классы области к ближайшему родителю только когда необходимо (например, когда не используются префиксные классы).

Он также приводит следующие примеры:

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

Короче говоря: стремимся охватить класс своим родителем. Не идите дальше, чем 3 селектора.

Вы в порядке с:

.bar:hover .foo { ... }

Дальнейшее чтение

Источник
Другие вопросы по тегам