search

bem-site / bem-forum-content-ru

Content BEM forum for Russian speak users
MIT License
56 stars 6 forks source link

Как переопределить некоторые стили темы? #316

Open uliantsev-a opened 9 years ago

uliantsev-a commented 9 years ago

На примере 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;
}
Да и в принципе...
apsavin commented 9 years ago
  1. Может быть, если сильно хочется изменить стили темы - просто создать свою тему?
  2. Если именно изменить - создайте css файл и переопределите, а в чем проблема?
uliantsev-a commented 9 years ago

В некоторых стилях реализовано то что нужно, кроме незначительных изменений, типа vertical-align или другого цвета рамки. А созданные css для блока переопределяются стилем темы. т.к. судя по всему инициализация темы происходит после самописных стилей.

И раз уж коснулись темы своих стилей, намекните пожалуйста, как их создавать? В смысле не просто css, styl, а создание своего параметра для тега theme?

apsavin commented 9 years ago

Чтобы ваши стили переопределяли стили библиотеки - используйте mustDeps в зависимостях.

Про свое значение для модификатора theme - не понял, в чем сложность? Чем свое значение отличается от "просто css, styl"?

Guria commented 9 years ago

Ваш CSS селектор должен иметь больший вес за счёт специфичности и желательно располагаться после библиотечных определений: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity Попробуйте:

.select.select_theme_islands .select__button {
    vertical-align: middle;
}
Guria commented 9 years ago

И раз уж коснулись темы своих стилей, намекните пожалуйста, как их создавать? В смысле не просто css, styl, а создание своего параметра для тега theme?

Примененние параметра mods: { theme: 'my-theme' } приведёт к тому, что у блока select будет соответствующий класс select_theme_my-theme. Всё что вам надо для создания собственной темы, это описать свой css для соответствующих селекторов.

.select_theme_my-theme
{
    max-width: 100%;
    vertical-align: bottom;
    .select__button
    {
        width: 100%;
        text-align: left;
        vertical-align: middle;
    }
    /* прочие стили */
}
uliantsev-a commented 9 years ago

Спасибо за помощь.

Сложности нет, я не знаю как и в поверхностном изучении руководства не нашел ссылок на создание своей темы. Вопрос в том, как про инициализировать новый параметр для theme. Отличие вероятно в систематизированном использовании однотипных стилей, в том числе в других проектах, одним тегом, а не копированием блоков.

Guria commented 9 years ago

Ещё раз отмечу. не надо ничего инициализировать особым образом.

dab commented 9 years ago

@Bumerang47 для переопределения стилей блока на своем проекте необходимо создать в папке уровня desktop.blocks директорию для переопределяемого блока — например select. Вы получите такую структуру:

libs/
desktop.blocks/
    select/
// добавил файл в папку с модификатором темы
        _theme/
            select_theme_islands.styl

В файл select_theme_islands.styl вы пишите стили, которые нужно переопределить:

.select_theme_islands .select__button {
    vertical-align: top;
}

Если вы хотите создать свою тему — нужно создать для нее стили, которые будут матчиться на соответствующий модификатор — .select_theme_original-theme-name.

Соответственно в bemjson нужно указать имя модификатора для этого элемента:

block : 'select', mods : { mode : 'radio', theme : 'original-theme-name', size : 'm' }

Или, можно указать модификатор для блока page и каскадом стилизовать все нужные блоки и элементы.

.page_theme_original-theme-name .select {}

.page_theme_original-theme-name .select__button {}
uliantsev-a commented 9 years ago

Всем большое спасибо, всё стал предельно ясно. Действительно ни чего сложного.

uliantsev-a commented 9 years ago

Сделаю небольшой вывод. метод с передопределеной структурой и стилем к ней

например select. Вы получите такую структуру:

libs/
desktop.blocks/
    select/
        select.css

В файл select.css вы пишите стили, которые нужно переопределить:

.select_theme_islands .select__button {
    vertical-align: top;
}

Стили темы не переопределяет, правила темы - выше собственных правил.

Методом mustDeps, стили темы полностью заменяются описанными в {$имяФайла}.deps.js, удаляя правила стилей темы (islands) Если я правильно делал:

({
    mustDeps:[{ block: 'select__button' }]
})

с shouldDeps эффект тот же.

Каскадом, через css блока page, приоритет не выше стилей темы. Да и не уверен, что подход подобного каскада в стиле БЭМ.

Скопирую ка правила css темы в свой стиль и откажусь от тега theme, на первое время.

apsavin commented 9 years ago

нет,

  1. Должно быть 
({
    mustDeps:[{ block: 'select' }]
})

либо

({
    mustDeps:[{ block: 'select' , elem: 'button'}]
})
  1. mustDeps ничего не удаляет, он только определяет порядок следования при сборке. shouldDeps не влияет на порядок, просто влючает в сборку
apsavin commented 9 years ago

Если вы доопределяете тему islands, то, скорее всего, вам нужно написать

({
    mustDeps:[{ block: 'select', mods:{ 'theme': 'islands'}}]
})
uliantsev-a commented 9 years ago

Спасибо

 ({
     mustDeps:[{ block: 'select', mods:{ 'theme': 'islands'}}]
 })

сработало

apsavin commented 9 years ago

Перечитайте)

dab commented 9 years ago

@Bumerang47 — Верно, сработало, потому что mustDeps подгружает зависимости до самого блока. Потому стили темы ушли вверх. Второй вариант — повторить файловую структуру темы. Если мы доопределяем стили блока select — это доопределение базовых стилей блока. Т.е. для доопределения темы нужно повторить файловую структуру темы:

./desktop.blocks/
    select/
        _theme/
            select_theme_islands.styl
.select_theme_islands .select__button {
    vertical-align: bottom;
}

В этом случае стили приедут в правильном порядке.

Обновил предыдущий ответ в соответствии с этими изменениями.

dab commented 9 years ago

Каскадом, через css блока page, приоритет не выше стилей темы. Да и не уверен, что подход подобного каскада в стиле БЭМ.

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

sipayRT commented 9 years ago

Чтобы стало ясно - забудьте на минутку про тему как о каком-то визуальном дополнении блока. theme - это обычный модификатор блока (как, например, pressed, type, some и т.д.). Поэтому, написав, стили по структуре типа 

desktop.blocks/
    select/
        select.css

вы доопределите не тему theme, а сам блок. Поэтому, в данном случае чтобы доопределить модификатор theme, нужно и код доопределения писать в соответствующем модификаторе:

./desktop.blocks/
    select/
        _theme/
            select_theme_islands.styl

Если соблюдать эти правила, то сборщик все правильно соберет без дополнительных зависимостей.

sipayRT commented 9 years ago

надеюсь, я не запутал еще больше :)

uliantsev-a commented 9 years ago

Всем спасибо, разжевали, проглотил =) Вроде понял. @apsavin, спасибо за ссылку, обязательно изучу механизмы сборки

И с файловой структурой ясно, надо повторять как в используемой теме (islands), а не только как в bemjson'e страницы. @dab, вот только небольшая тень в пояснении с каскадом. Понятно, что родитель может знать о своих детях. Но таким же темпом можем и все стили описать в родители page. Конечно это крайность, но..

sipayRT commented 9 years ago

Но таким же темпом можем и все стили описать в родители page

Нужно понимать, что в блок page ты вложил независимые блоки, а не зависимые элементы. Есть составные(сложные) блоки, которые состоят из блоков. В таком случае каскад допустим, т.к. эти блоки являются дочерними по отношению к составному.