На примере select.
{
block : 'select', mods : { mode : 'radio', theme : 'islands', size : 'm' },
name : 'select1',
val : 2,
options : [
{val : 1, text : 'Доклад' },
{ val : 2, text : 'Мастер-класс' },
{ val : 3, text : 'Круглый стол' }
]
}```
хочу переопределить значение с top на middle.
.select_theme_islands .select__button {
vertical-align: top;
}
Да и в принципе...
В некоторых стилях реализовано то что нужно, кроме незначительных изменений, типа vertical-align или другого цвета рамки. А созданные css для блока переопределяются стилем темы. т.к. судя по всему инициализация темы происходит после самописных стилей.
И раз уж коснулись темы своих стилей, намекните пожалуйста, как их создавать? В смысле не просто css, styl, а создание своего параметра для тега theme?
Чтобы ваши стили переопределяли стили библиотеки - используйте mustDeps в зависимостях.
Про свое значение для модификатора theme - не понял, в чем сложность? Чем свое значение отличается от "просто css, styl"?
Ваш CSS селектор должен иметь больший вес за счёт специфичности и желательно располагаться после библиотечных определений: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity Попробуйте:
Примененние параметра
mods: { theme: 'my-theme' }
приведёт к тому, что у блокаselect
будет соответствующий классselect_theme_my-theme
. Всё что вам надо для создания собственной темы, это описать свой css для соответствующих селекторов.Спасибо за помощь.
Сложности нет, я не знаю как и в поверхностном изучении руководства не нашел ссылок на создание своей темы. Вопрос в том, как про инициализировать новый параметр для theme. Отличие вероятно в систематизированном использовании однотипных стилей, в том числе в других проектах, одним тегом, а не копированием блоков.
Ещё раз отмечу. не надо ничего инициализировать особым образом.
@Bumerang47 для переопределения стилей блока на своем проекте необходимо создать в папке уровня
desktop.blocks
директорию для переопределяемого блока — напримерselect
. Вы получите такую структуру:В файл
select_theme_islands.styl
вы пишите стили, которые нужно переопределить:Если вы хотите создать свою тему — нужно создать для нее стили, которые будут матчиться на соответствующий модификатор —
.select_theme_original-theme-name
.Соответственно в bemjson нужно указать имя модификатора для этого элемента:
Или, можно указать модификатор для блока
page
и каскадом стилизовать все нужные блоки и элементы.Всем большое спасибо, всё стал предельно ясно. Действительно ни чего сложного.
Сделаю небольшой вывод. метод с передопределеной структурой и стилем к ней
Стили темы не переопределяет, правила темы - выше собственных правил.
Методом mustDeps, стили темы полностью заменяются описанными в {$имяФайла}.deps.js, удаляя правила стилей темы (islands) Если я правильно делал:
с shouldDeps эффект тот же.
Каскадом, через css блока page, приоритет не выше стилей темы. Да и не уверен, что подход подобного каскада в стиле БЭМ.
Скопирую ка правила css темы в свой стиль и откажусь от тега theme, на первое время.
нет,
либо
Если вы доопределяете тему islands, то, скорее всего, вам нужно написать
Спасибо
сработало
Перечитайте)
@Bumerang47 — Верно, сработало, потому что
mustDeps
подгружает зависимости до самого блока. Потому стили темы ушли вверх. Второй вариант — повторить файловую структуру темы. Если мы доопределяем стили блокаselect
— это доопределение базовых стилей блока. Т.е. для доопределения темы нужно повторить файловую структуру темы:В этом случае стили приедут в правильном порядке.
Обновил предыдущий ответ в соответствии с этими изменениями.
Подобный каскад допустим для темизации и не нарушает принцип независимости блоков. Родитель может знать о своих потомках. Но в данном случае у нас темизация происходит с помощью других селекторов, соответственно их вес выше. Надеюсь предыдущий ответ поможет понять принцип работы.
Чтобы стало ясно - забудьте на минутку про тему как о каком-то визуальном дополнении блока.
theme
- это обычный модификатор блока (как, например,pressed
,type
,some
и т.д.). Поэтому, написав, стили по структуре типавы доопределите не тему
theme
, а сам блок. Поэтому, в данном случае чтобы доопределить модификаторtheme
, нужно и код доопределения писать в соответствующем модификаторе:Если соблюдать эти правила, то сборщик все правильно соберет без дополнительных зависимостей.
надеюсь, я не запутал еще больше :)
Всем спасибо, разжевали, проглотил =) Вроде понял. @apsavin, спасибо за ссылку, обязательно изучу механизмы сборки
И с файловой структурой ясно, надо повторять как в используемой теме (islands), а не только как в bemjson'e страницы. @dab, вот только небольшая тень в пояснении с каскадом. Понятно, что родитель может знать о своих детях. Но таким же темпом можем и все стили описать в родители page. Конечно это крайность, но..
Нужно понимать, что в блок
page
ты вложил независимые блоки, а не зависимые элементы. Есть составные(сложные) блоки, которые состоят из блоков. В таком случае каскад допустим, т.к. эти блоки являются дочерними по отношению к составному.