RU
innabelaya
innabelaya
31 January 2017

Brief news about the BEM world since the beginning of this year:

Documentation news

Site news

Rolled out the BEM libraries section in a new design on bem.info:

Libraries news

bem-core

  • Released bem-core 4.1.0 and 4.1.1. All changes of the both releases are described in a CHANGELOG.

bem-components

  • Released bem-components v4.0.0 with update of controls design and with the transition from the Stylus to postCSS.
  • Released bem-components 5.0.0 that used bem-core 4.1.1. There are two style sets in v5.0.0: source files with postCSS and compiled CSS in case you prefer to use some preprocessor.

bem-history

  • Not yet released but is already used in a separate branch v4. This version is compatible with bem-core v4. Feel free to try, revise and send us a feedback before we release a new version.
    The major change is rename of uri block to uri__querystring element, which extends the basic implementation of the same name module in bem-core with Uri class. Class methods remained unchanged.

bem-react-core

Technologies news

bem-express

Released the following major updates:

  • Updated bem-core to 4.1.1 and bem-components to 5.0.0.
  • Began to use PostCSS instead of Stylus. We provide the same set of plugins that bem-components has.
  • Implemented an optional livereload. For details read the documentation and README of the project.
  • Achieved the speed acceleration of the build procedure by updating npm-modules required for assembly.
  • Abandoned bower to supply libraries. Now all dependencies are set through npm in node_modules directory.

bem-xjst

  • v8.3.1 (v7.4.1)

    • extend() mode fixed. Now it works as expected.
    • Documentation updated: this.extend(o1, o2) description added.
  • v8.4.0 (v7.6.0)

    • New unquotedAttrs option allows us to ommit unnececary quotes of HTML attributes in some cases.
  • v8.4.1 (v7.6.1)

    • extend(function(ctx, json) { … }) mode callback now have two arguments, the same as have the callbacks of other modes. The first argument is a link to context of (this) template execution. The second — link to a BEMJSON node.
  • v8.4.2

    • Escaping functions fixed: now argumengs undefined or null and NaN will give you empty string as a result. In previous versions you get stringified results ('undefined', 'null', 'NaN').
  • v8.5.0

    • BEMTREE: added modes related to data: js(), addJs(), mix(), addMix(), mods(), addElemMods(), elemMods(). The rest of the modes that are relevant only to-HTML are available in BEMHTML.
  • v8.5.1

    • Fixed bug: calculate position if block/elem was replaced via replace().
  • v8.5.2 (v7.6.4)

    • Fixed bug in BEMTREE related to the rendering of special value field content { html: '<unescaped value>' }.
    • bem-xjst onlinе demo updated:
      • Added a switch of BEMHTML/BEMTREE engines.
      • Added a plug for BEM.I18N (), which returns its second argument. This is useful to copy the code from production to a sandbox.
    • README updated.
    • A sandbox updated. You could help our projest to fix issues with help wanted lable.

enb-bemxjst

  • Released a new version of enb-bemxjst v8.5.2 with "dependencies": { "bem-xjst": "8.5.2" }. However, we continue to actively support the both branches: 7.x and 8.x.

All changes are described in releas notes v8.5.2 and v7.6.4 and in a CHANGELOG.

BEM toolbox news

bem-tools

Released bem-tools 2.0.0 with updated bem-tools-create. Detailed description is in README.

bem-walk

Wrote a full and clear README.

project-stub

jaykobo
jaykobo
11 January 2017

Hi there.. i'm just beginning with BEM and love the concept but struggling a bit around with nested blocks. I want to build some kind of responsive teaser with a few elements inside.

This is what my html looks like:

<div class="teaser">

  <div class="teaser__background">
    <picture></picture>
  </div>

  <div class="teaser__featured-product"></div>

  <div class="teaser-content"> <!-- what about this correct naming and its children-elements? -->

    <div class="teaser-titles"> <!--same question here -->
      <p class="teaser-title__overline"></p>
      <h1 class="teaser-title__headline"></h1>
      <h2 class="teaser-title__subline"></h2>
    </div>

    <div class="teaser-content__text">
      <p>Lorem ipsum..</p>
    </div>

    <div class="teaser-content__legal">
      <p>1) Some terms...</p>
    </div>

    <div class="teaser-content__manufacturer-logo"></div>

  </div>

  <div class="teaser__ribbon"></div>

</div>

Inside of teaser I want to keep my content together in one block teaser-content for better positioning. So what would be the correct naming for the teaser-content-wrapper and then the following child-element teaser-titles?

I thought about a bit different version for example:

<div class="teaser-content">

    <!-- <div class="teaser-titles"> --> <!-- maybe we don't need it? -->
      <p class="teaser__title teaser__title--overline"></p>
      <h1 class="teaser__title teaser__title--headline"></h1>
      <h2 class="teaser__title teaser__title--subline"></h2>
    <!-- </div> -->

But questions are still the same. Hope really you can help me because this drives me crazy.

Greetings from the rainy Hamburg (Germany)

jaykobo
jaykobo
11 January 2017

the posts in this forum? i want to post a question but can't find any description on how about to format my html code for better readability.

ihorzenich
ihorzenich
28 October 2016

AFAIK, somewhere I have seen proof of the following things. Please confirm or disprove.

1) As DOM-tree and BEM-tree aren't required be the same, it's possible that the BEM-element is physically located outside its BEM-block in DOM and it is valid.

<div class="block"></div>
<div class="block__element"></div>

2) For the same reason the elements of one block can be nested in another block, making intersection in the DOM-tree like:

.block1
     .block2
         .block1__el
         .block2__el

or even like this:

.block1
     .block2
         .block1__el
             .block2__el
remort
remort
2 November 2016
  1. EN, RU, UK
    Я подумал : "Чем, интересно в Яндексе UK english отличается от US ?" и нажал. Получил украинский 0_о. Украинский это UA.

  2. Не уверен, но вероятно в UK/US english все таки надо поставить определенный артикль the перед словом domain в фразе в футере:
    Jadwiga and Jacek Duniec thank you for domain!
    У нас конкретный домен вот этого сайта. Он есть, он один и о нем мы пишем благодарность.

  3. Совсем не уверен но если у Яцека фамилия пишется Duniec и он не из UK и не из US и даже не из UA а скорее всего из восточной европы, то U читается как У. [Дунец ?]. Яб спросил самого Яцека.

FrancisVega
FrancisVega
19 March 2016

Hi all!
Is there any guide or examples to write plain js for blocks?

Thanks!

glaszczyk
glaszczyk
17 October 2016

Hi,
This is probably very basic question but I'm not sure I saw something about that.

How is best way to move from website design into BEM structure?

I mean, how to fast identify all blocks, find what names should be and build structure efficiently?

Thanks.

glaszczyk
glaszczyk
16 October 2016

Hello!

I'm newbie in BEM and trying to use it in my workflow but I'm not sure how solve that problem.

I would like to create simple layout and position all elements i.e. something like this:

<div class="main-window">
    <div class="gallery">
        <!-- Here is gallery content -->
    </div>
    <div class="story">
        <!-- Here is story content -->
    </div>
</div>

Should I style .gallery and .story with position and dimension properties or maybe should I nest them in .main-window elements. Something like that:

<div class="main-window">
    <div class="main-window__gallery-wrapper>
        <div class="gallery">
            <!-- Here is gallery content -->
        </div>
    </div>
    <div class="main-window__story-wrapper>
        <div class="gallery">
            <!-- Here is story content -->
        </div>
    </div></div>

Now I can separate .gallery and .story styling from their position because I can define size and position with .main-window elements

.main-window__gallery-wrapper {
    width: 500px;
    margin: 0 auto;
}
.gallery {
    /* formatting without size and position */
}
.main-window__story-wrapper {
    width: 500px;
    margin: 30px auto;
}
.story {
    /* formatting without size and position */
}

Sorry for (probably) such a simple question but I didn't find answer for that.

Thanks.

dima117
dima117
2 September 2016

Hello!

We have made ASP.NET MVC project-stub that will show you how to solve typical tasks using BEM-related tools.

There is the detail description how everything is working in the readme file (in Russian). You may see the source code as well as run demo-project on your PC to try it.

Tomorrow I will show this stuff at the Yandex Subbotnik.

Connect to the broadcast!

pruttned
pruttned
10 August 2016

Hi,
I'm creating simple input with icon.
I have common block for all inputs, named 'input' that is setting padding alongside of another styles, like color, border, etc.
For input with icon, I’ve created another block named ‘input-icon’. In order to create space for the icon, I must override left padding in the input when used in ‘input-icon’ block.
To do this, I’ve created input modifier ‘input—with-icon’.
But now I have tied blocks where if someone uses ‘input-icon’, he must remember to also put ‘input—with-icon’ modifier on the input.
Is there any better way?
Thanks.

<div class="input-icon">
    <span class="input-icon__icon">X</span>
    <input class="input-icon__input input input--with-icon">
</div>
.input {
    padding: 7px 7px;
    /*..*/
}
.input--with-icon {
    padding-left: 30px;
}
.input-icon {
    position: relative;
}
.input-icon__icon {
    position: absolute;
    z-index: 1;
    left: 7px;
    /* .. */
}
woosaj
woosaj
1 August 2016

Hello, I'm new to BEM and I want to get opinion on something, so lets say I have blog post, in blog post we have title, badge, summary, figure ... below is the example of my html

    <div class="post">
        <h1 class="post__title">This is title</h1> 
        <summary class="post__summary">
            Some text here
        </summary>
        <figure class="post__figure figure">
            <img class="figure__image" src="">  
            <figcaption class="figure__caption">Some text</div> 
        </figure>
    </div>

So should I do .post_figure and then inside .post__figure__image and .post__figure__caption or should i create new block like in example?

tadatuta
tadatuta
7 August 2015

There was a thread recently in Russian on using BEM in medium-sized projects written by Nikolay Gromov who complained that writing BEMJSON requires more time than writing HTML with a help of emmet.

I don't feel the same way about time spent on writing code not in percentage relating to time spent on debugging and thinking over not in absolute terms but I thought that spending time for writing analogue for emmet for BEMJSON is good enough task to spend an evening.

It is how this package bemmet emerged that can expand abbreviations like b1>__e1*2>b3_theme_islands+_state_active{hello} into BEMJSON:

{
    block: 'b1',
    content: [
        {
            block: 'b1',
            elem: 'e1',
            content: [
                {
                    block: 'b3',
                    mods: { theme: 'islands' },
                    content: {}
                },
                {
                    block: 'b1',
                    mods: { state: 'active' },
                    content: 'hello'
                }
            ]
        },
        {
            block: 'b1',
            elem: 'e1',
            content: [
                {
                    block: 'b3',
                    mods: { theme: 'islands' },
                    content: {}
                },
                {
                    block: 'b1',
                    mods: { state: 'active' },
                    content: 'hello'
                }
            ]
        }
    ]
}

Using options you can configure custom naming — powered by bem-naming.
stringify() method supports indentation options and quotes — powered by stringify-object.

You can try bemmet in action using online demo. You can also install it right away into your editor using plugins for Sublime Text and Atom.

Would be nice if you can commit with plugins for some other editors.

Good luck!

There are posts for this query in archive:
Go to archive

Sort

Labels