RU
mrttl
mrttl
26 March 2017

Hello everyone,
Just started with BEM and was a bit stuck on how to use it the right way, I have the following code:

<header class="header">
  <div class="header__logo">logo</div>
  <div  class="header__navigation">
    <nav class="header__navigation main-menu">
      <ul class="main-menu">
        <li class="main-menu__list">
          <a href="" class="main-menu__link">link</a>
        </li>
        <li class="main-menu__list">
          <a href="" class="main-menu__link--active">link</a>
        </li>
        <li class="main-menu__list">
          <a href="" class="main-menu__link">link</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Is this the correct use of BEM? As I understand not to nest too deep, so if I wanted to have a new block within an element you can use the mix feature?

Also I wanted to keep .main-menu reusable so I can move the main menu from the header to the sidebar if needed one day.

I hope I got it right :)

lilliputten
lilliputten
22 March 2017

Как правильно переопределить модуль, если он не только без 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. Вроде был раньше?..)

jitendravyas
jitendravyas
7 April 2017

What is your opinion on USING SMACSS STATE CLASSES FOR COMMON MODIFIERS as suggested in this article?

http://sugarenia.com/blog/bem-pitfalls-advice/

innabelaya
innabelaya
3 April 2017

We published a new mini-library — bem-calendar. It contains a calendar based on bem-components.

It looks like this:
desktop_en

Try our new bem-calendar in your projects!

innabelaya
innabelaya
29 March 2017

Hi all,

We are working on a new version of this forum and in the process a bem-textarea-editor library was created. The library has

  • An editor block that allows you to write text in Markdown
  • A convenient toolbar (like Github)
  • A preview function to check the post before sending it to the server.

bem-textarea-editor

It turned out well, so we decided to publish the library as open source. May be it will be useful for you too! :)

Try the block here.

botoba
botoba
28 March 2017

Hello, I just started with BEM and really like it. I just have an issue with the following code and hope someone can help me out.

This is my sample code

<nav class="books">
  <ul class="books__lists">
    <li class="books__items"><a href="/"  class="books__links">Sidebar link</a></li>
  </ul>
</nav>

How I am lost to what the link should really be called? Since the li is under the block of books_lists now sure what the link class should be?!
I have a design with a lot of different link styles, so is it better to have something like link-books?

Thank you and keep up the good work.
Jim.

mrttl
mrttl
26 March 2017

How does BEM work with Bootstrap´s .container and .row classes? Say if I have a block called .design-news with a background image that spans the entire page and then a .container and .row under that block which would center my content, can I just keep the default classes or does it have to be .design-news__container and .design-news__row?

mrttl
mrttl
26 March 2017

Which is better:

<article class="news">
  <div class="news__image">image</div>
   <div class="news__details">
     <h1>News title</h1>
     <p>News story</p>
   </div>
</article>

or:

<article class="news">
  <div class="news__image">image</div>
   <div class="news__details">
     <h1 class="news__details-title">News title</h1>
     <p class="news__details-story">News story</p>
   </div>
</article>

Please note: .news__details-title and .news__details-story have no real style as I already have a base style for all my H1s and P tags, so with BEM, can I just add phantom classes to make the markup look more readable? Or go with the first example? Personally I like option 2...

innabelaya
innabelaya
21 March 2017

Hi all,

We have a good news — new versions of bem-core and bem-components are available!

bem-core 4.2.0

The version is completely backward compatible, so the update should be fast and "free".

The main change is compatibility with bem-xjst 8.x.
And more good news — all documentation is in English now.
Details find in changelog.

bem-components 5.1.0

The version is also completely backward compatible, so the update should be "free" too.

Release includes

  • an update of dependencies on bem-core to 4.2.0
  • visual design for link_disabled
  • fixes of some bugs

Details find in changelog.

bem-components 6.0.0

This version requires a mandatory update to bem-xjst 8

This version necessarily requires an update to bem-xjst 8, where new useful modes have appeared and the work of the extend mode has been fixed. Required packages for build with ENB (enb-bemxjst 8.6.7) or Gulp (gulp-bem-xjst 3.0.0) are already available for installation.

To swithch to a new version of bem-components you may need automatic migrator of templates: https://github.com/bem/bem-xjst/tree/master/migration#migration-tool-for-templates

The difference between 5.1.0 and 6.0.0 is new templates.

Try new versions

New releases of bem-core 4.2.0 and bem-components 6.0.0 are already integrated in [project-stub] (https://github.com/bem/project-stub/).

If you have any problems with the update — write, we will try to help.

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 читается как У. [Дунец ?]. Яб спросил самого Яцека.

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.

FrancisVega
FrancisVega
19 March 2016

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

Thanks!

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

Sort

Labels