BEM-подход и наследование от родителя #2
Comments
|
Конечно проще переопределить стили блока .bar внутри блока .foo, но в этом случае появляется зависимость одного блока от другого, и код блоков разбегается по структуре проекта. Поэтому лучше добавить модификатор внутри блока который нужно изменить. В твоем примере достаточно повесить модификатор на самый верхний уровень и переопределить каскадом (любой вложенности для модификаторов) все нужные элементы этого блока. P.S. То есть у блока есть элементы, а у элементов не должно быть элементов (иногда допускается).
|
|
@a-frolovsky:
Стало быть вариант: .feed.-landing
.feed_update
.update
.update_author
.user.-landing
.user_avatar
.user_name
.update_content
.feed_update
.update
.feed_update
.update
<…>Правильно? При этом ты имеешь в виду исключительно дочерние элементы, не дочерние блоки? Блоки же могут вкладываться в другие блоки без обязательной необходимости оборачивать их во врапперы-элементы, но каскадом я могу добраться только до элементов? В данном примере я не смогу добраться до |
|
Да
|
|
@a-frolovsky, а так можно, |
|
@Spirik Можно делать что хочешь :) но в таком случае стили блоков расползутся по всей структуре, а оно тебе нужно? |
|
@a-frolovsky Почему? Расползутся только модификаторы (а они и так расползутся, если ты будешь придерживаться более-менее конзистентного их именования). Так что стили блока и все его переопределённые вариации останутся на своём месте - в файле стилей блока. Просто переопределённые правила начнутся с каскада от модификатора. (Если не совсем понятно, чего я добиваюсь, то поясню. Не хочу плодить бесконечных одинаковых модификаторов на вложенных блоках/элементах, чтобы, по возможности, оставаться в рамках DRY). |
|
@Spirik Не хочешь, а надо :) методология вводит свои правила. Нужно брать и пробовать. Модификаторы не будут одинаковые, и не расползутся. По структуре с закрытыми глазами можно сказать к какому блоку относится модификатор. |
|
Возможно, придётся делать и так и так, жалко будет каша. CSS конечно будет красивее, если писать модификатор у каждого sub-элемента |
|
В общем мне окей писать так, оно работает, выглядит не явно, но компактно: .block
color: magenta
&_user
color: green
+breakpoint(tablet)
color: yellow
.block:hover &,
&.-active
color: red
+breakpoint(tablet)
color: blue |
|
Собственно, к вопросу о наследовании от родительских модификаторов: https://github.com/a-frolovsky/demoapp/pull/1 . |
Мой вопрос из письма касаемо описанной @a-frolovsky системы.
Просто сказать “мы против каскадов” конечно замечательно, но на практике неизбежно будут возникать такие ситуации.
Например. Есть вёрстка блока со списком апдейтов. (У меня тут
.block-name,.block-name_element-name,.-modifier).На Лэндинге нужно вывести этот же фид, но слегка в модифицированном виде (увеличить отступы между апдейтами, увеличить размер аватарки пользователя). Как этого добиться?
Вешать модификаторы на каждый изменённый элемент (т.е., “пробрасывать” их внутрь блока фида)?
Завести врапперы-элемены блока
.feed, чтобы задавать отступы через них, а не непосредственно через блоки.update?Или, всё-таки, допускается каскад от
.feed.-landing(чтобы, скажем, не перегружать паршал фида логикой навешивания классов-модификаторов)? Тогда в файл со стилями какого блока правильнее было бы его определить, feed или в стили блоков, затронутых изменениями?The text was updated successfully, but these errors were encountered: