BEM - Forum

Как правильно переопределить модуль, если он не только без DOM-представления, но и вовсе сделан на "чистом" ym?

Предположим, хочу доопределить метод querystring.parse из bem-components. Пока решил так:

modules.define('querystring2', ['querystring', 'objects'], function(provide, querystring, objects) {

var querystring2 = objects.extend(null, querystring, /** @exports */ {

    /**
     * Дополняем станадртную ф-цию parse
     * @param {string} str
     * @returns {object}
     */
    parse : function (str) {
        // Удаляем символ '?' в начале строки
        if ( typeof str === 'string' && str.indexOf('?') === 0 ) {
            str = str.substr(1);
        }
        return querystring.parse(str);
    },

});

provide(querystring2);

});

Есть ли более грамотный способ? Есть ли способ доопределить исходный модуль (декларировать под тем же именем)?

Смотрел:

(Не вижу тега ymodules. Вроде был раньше?..)

Hi there,

I know one of the benefits of BEM is not having to nest styles but I was wondering when is it ok to do so? Sometimes it's unavoidable and sometimes maybe more practical to do so?

In the example I'm working on I have bands/stripes than contain blocks of content, these bands can be different colours (black, white, blue). I achieve this by having a base class of <div class="band">, which the band is black the following class is added: <div class="band band--black">. For obvious readability issues the content of a darker block will need to be coloured differently, the headings white, paragraphs/lists a lighter grey and maybe even a subtle lightening of the anchor colour. It'd be a pain to apply classes to everything, especially if different content mark-up appears on different pages. So is it acceptable to write the CSS like this (using SCSS):

.band--black {
    h1,
    h2,
    h3,
    h4 {
        color: rgb(255,255,255);
    }

    p,
    ul,
    ol {
        color: color: rgb(200,200,200);
    }
}

or even this, which might be able to keep track of, keeping the colour changes grouped together:

h1,
h2,
h3,
h4 {
    .band--dark & {
        color: rgb(255,255,255);
    }
}

p,
ul,
ol {
    .band--dark & {
        color: rgb(200,200,200);
    }
}

This is some (basic) sample HTML:

<div class="band band--dark masthead">
        <div class="wrap">

        <h1 class="masthead__title">Page heading</h1>
        <ul class="breadcrumbs">
            <li class="breadcrumbs__item"><a href="#" class="breadcrumbs__link" title="TITLE">Home</a></li>
            <li class="breadcrumbs__item"><a href="#" class="breadcrumbs__link" title="TITLE">Section Name</a></li>
        </ul>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat accumsan purus, in posuere nibh aliquam faucibus. Nam varius lectus id nunc ullamcorper, at euismod enim placerat.</p>

        <h3>Related Categories</h3>
        <ul>
            <li><a href="#" title="TITLE TEXT">Category 1</a></li>
            <li><a href="#" title="TITLE TEXT">Category 2</a></li>
            <li><a href="#" title="TITLE TEXT">Category 3</a></li>
            <li><a href="#" title="TITLE TEXT">Category 4</a></li>
        </ul>

    </div>
</div>

Another question I have is the class of masthead, part of me thinks this should really be band--masthead following the BEM spec?

Thanks in advance, just starting off with BEM so I keep find myself questioning most of my implementations of it!

I am large

Left Middle Right

.button {border-radius:5px;}

As you see in the example above i have a block named "button". I want to reuse the block "button" inside another block "button-group".

However when a button is used within a "button-group" block i would like to apply some slight modifications.

The left button should have radius only on the left.
The middle button should have no radius.
The right button should have radius on the right only.

How should I do this? The straight forward way for me would be:

.button-group .button {border-radius:0;} .button-group .button:first-child {border-left-radius:5px;} .button-group .button:last-child {border-right-radius:5px;}

Thanks

Доопределение библиотечного ym-модуля

Ok to use descendant selector for common elements?

Compound block question