K
K
krll-k2015-05-07 17:47:55
css
krll-k, 2015-05-07 17:47:55

How, according to the BEM methodology, to correctly lay out such a section of the layout?

a9b51db445184bfaa5c31a8e4a6b8bd6.png
My version of bemjson.js, which I have no doubts about:

{
    block : 'information',
    content : [
        {
            block : 'telephone',
            mods : { float : 'none' },
            content : [
                {
                    elem : 'phone-number',
                    content : '8 (831) 280-96-51'
                },
                {
                    elem : 'opening-times',
                    content : 'Пн-Пт: 9:00-18:00'
                }
            ]
        },
        {
            block : 'telephone',
            content : [
                {
                    elem : 'phone-number',
                    content : '8 (800) 555-18-38'
                },
                {
                    elem : 'additional-information',
                    content : 'Звонок по России бесплатный'
                }
            ]
        },
        {
            block : 'city',
            content : [
                {
                    elem : 'city',
                    content : 'Нижний Новгород'
                },
                {
                    elem : 'additional-information',
                    content : 'Доставка по городу и области бесплатная'
                }
            ]
        }
    ]
}

What's embarrassing?
1. make the information block more specific by renaming it to block-information so that it is an annotation from the Russian "information block", but will this be true, I still can't understand?
2. The information block has no elements, but only blocks nested in it - can an element be a block at the same time?
3. Should the names of blocks and elements reflect their content, or can (should) try to avoid this?
4. It follows from 3 - should the city and additional-information elements be named, or should they just be named as information and subinformation?
Let's say you have already applied BEM to your projects, and you know more than me, and therefore I admit that it is your proposed solution that is more likely to be correct than mine. Could you show me how, on the basis of the piece of layout I specified above, to make up according to the BEM methodology in bemjson? The most important thing is not to forget to justify your decision, why exactly your decision is correct.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Anton, 2015-05-08
@krll-k

1. In BEM, so blocks. Therefore, leave the block as is block : 'information'. Here, after all, a block is literally written: information.
2. The question is not clear. Yes, there are no elements in the information block, but how does this relate to the second part of the question?
One way or another, you can make mixes in bemjson - that is, mix block elements to other blocks or blocks to elements of another block or block to block, etc.
3, 4. Yes, of course they should. Of course, you can leave the city element in the city block, but it is better to name the element name or title. And the opening-times element in the telephone block is a bit confusing. Maybe instead of a telephone block, make an information block element called section? As an option, I propose this, to get by with a single information block:

{
    block : 'information',
    content : [
        {
            elem: 'section',
            mods : { float : 'none' },
            content : [
                {
                    elem : 'phone-number',
                    content : '8 (831) 280-96-51'
                },
                {
                    elem : 'opening-times',
                    content : 'Пн-Пт: 9:00-18:00'
                }
            ]
        },
        {
            elem: 'section',
            content : [
                {
                    elem : 'phone-number',
                    content : '8 (800) 555-18-38'
                },
                {
                    elem : 'additional-information',
                    content : 'Звонок по России бесплатный'
                }
            ]
        },
        {
            elem: 'section',
            mods: { type: 'city' }
            content : [
                {
                    elem : 'city',
                    content : 'Нижний Новгород'
                },
                {
                    elem : 'additional-information',
                    content : 'Доставка по городу и области бесплатная'
                }
            ]
        }
    ]
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question