Login with github

Short interview with Sergey Berezhnoy about BEM and its future: https://survivejs.com/blog/bem-interview/

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

  • Libraries
  • BEM & React
  • Technologies
  • Toolbox
  • Documentation
  • bem.info
  • Events

Libraries

bem-core

Released bem-core 4.1.0-4.2.1.

All changes of the releases are described in the CHANGELOG.

bem-core: turbo

jQuery has been removed from the bem-core library. There is not an official release yet, but you can try the release candidate build and send your feedback.

bem-components

Released bem-components 4.0.0-6.0.1.

All changes of the releases are described in the CHANGELOG.

bem-history

Released the 4.0.0 version.

All changes are described in the CHANGELOG.

bem-calendar

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

bem-textarea-editor

Published a bem-textarea-editor library that 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.

Try the block here.

bem-font-awesome

Published a bem-font-awesome library, that uses Font Awesome with BEM notation and leave all extra styles out of the project.

bem-font-awesome-icons

Published the alternative version of the bem-font-awesome library — bem-font-awesome-icons, where we split the font into separate SVG icons to sent to the client side the usefull parts only.

BEM & React

bem-react-core

Release candidate version — 1.0.0. Lack of useful documentation blocks the official release of the library.

bem-react-components

Actively worked on bem-react-components — the library of blocks for development with React and BEM-methodology. The official release has not yet been published, but most of the blocks have already been implemented.

create-bem-react-app

Continue to create the React project stub create-bem-react-app, which allows with one command to build a React/BEM application with installed dependencies and correct file structure.

Technologies

bem-express

Published the major releases:

  • Updated the libraries versions — bem-core 4.2.1 and bem-components 6.0.1.
  • Switched from Stylus to PostCSS. By default comes the same set of plug-ins like in the bem-components.
  • Implemented an optional livereload. For details see documentation and README file.
  • Achieved acceleration of the build procedure due to the npm-modules.
  • Refused bower for the supply of libraries. Now all dependencies are set through npm in the node_modules folder.

Wrote step-by-step tutorial: Dynamic projects with BEM.

project-stub

Updated bem-core library version to 4.2.1, bem-components — to 6.0.1 and other dependencies.

As an experiment include gulp-bem into the project-stub.

bem-xjst

Released v8.3.1-v8.8.5 versions.

All changes of the releases are described in the CHANGELOG.

Toolbox

bem-sdk

Moved all bem-sdk packages into a monorepo. We eliminated the loop dependencies between the modules and divided components for optimal use on the client side.

Published updated bem-sdk packages. Updated documentation.

Created the @bem/sdk.file and @bem/sdk.naming.file.stringify packages, which allow you to create path to the file using BEM entity declaration, path to the level and file structure scheme.

bem-tools

Released bem-tools 2.0.0 with updated bem-tools-create 2.1.0.

For details see Readme file.

ENB

Released major prestable version of enb 2.0.0-0. Implemented bem-sdk modules into ENB.

enb-bem-techs

Rewrote enb-bem-techs on bem-sdk and released a prestable version 3.0.0-0.

enb-bemxjst

Updated enb-bemxjst to the newest bem-xjst version, which supports an export to the different modular systems.

gather-reverse-deps

Released gather-reverse-deps package, that allows to build inverse dependences.

gulp-bem-src

Released 0.1.0 version with updated bem-sdk.

bem-naming

The bem-naming package moved to the bem-sdk monorepo. A new package name is @bem/sdk.naming.entity.

In addition, now you can use separate packages:

borschik

Released 1.7.0-2.0.0 versions. Have stopped supporting node 0.8.0. and replaced uglify-js with uglify-es to support ES6.

For details see CHANGELOG.

bem-walk

Wrote new README.

bemhint

Released 0.10.0-0.10.1 versions with warnings support. Update supports full backward compatibility with the previous version.

bemhint-estree

Released missing dependencies linter — bemhint-estree. Added ES6 support and wrote wrapper for the linter of bem-xjst.

bemhint-deps-schema

Released a new version of bemhint plugin — bemhint-deps-schema 2.1.0, that checks that the files * .deps.js match the specification. Now bemhint-deps-schema can process not only.json-, but .js files with module.exports.

Documentation

bem.info

Events

I am using BEM for the first time in my latest project, using SASS and I love it. A lot of refactoring going on, however. One thing that I have not solved is the following, very common situation:

I have a block with a modifier, let's say .block, and .block_wide. In .block_wide there are multiple elements that will get minor tweaks depending on what block they are in. For example .block__image has to get a 100% width when the block is .block_wide. How to write this, preferably in scss?

This is the HTML situation:

<div class="block">
  <div class="block__image"></div>
</div>
<div class="block block_wide">
  <div class="block__image" /></div>
</div>

These are some wrong answers I came up with:

.block {
  &__image { width: 50%; }

// Block level modifier
  &_wide {
    &__image { // This does not work because it results in an entirely new class that is not used in the markup
      width: 100%;
    }
  }
}

In the previous "solution" I'm trying to write it the way I would like it to work but obviously it doesn't.

The next solution works but it feels absolutely wrong:

.block {
  &__image { 
    width: 50%;
    .block_wide & {
      width: 100%;
    }
  }

// Block level modifier 
  &_wide {} // Nothing here
}

Now there is no clarity in the source css at all and very quickly this will get out of hand. I'm probably trying to use BEM in a way that it's not meant to be used. If someone could enlighten me on the matter!

Hello,

I was exploring BEM and how could I apply it to my future projects.

Let's say I have 3 widgets, each one containing multiple styles. I name the widgets Card 01, Card 02 and Card 03, they are similar but not the same, some input fields are different and I might create even more, that's why I chose to name them using numbers.

The html looks like this, what's inside card__content is different from a card to another, and the card have about 3 themes, my question is how should I add those differential classes?

<div class="card">
    <img class="card__image">
    <div class="card__content">
        ...
    </div>
</div>

There are few options and I can't decide.

  1. class="card card-01 card_theme_01" .card-01.card_theme_01 {}

  2. class="card card-01 card-01_theme_01" .card-01_theme_01 {}

  3. class="card-01 card-01_theme_01 class="card-01__image

Or I can even turn the elements into blocks, an advance would be really helpul.

<div class="card-01 card_theme_01">
    <img class="card-image">
    <div class="card-content">
        ...
    </div>
</div>

<div class="card-01 card-01_theme_01">
    <img class="card-image">
    <div class="card-content">
        ...
    </div>
</div>

In the BEM documentation, they make reference to something called a "service block":

... In a case like this, instead of creating an element, you need to create a service block.

I can't find any mention of a service block. What does this actually mean?

We are happy to announce the FullStack conference in London. Are you looking for all the latest JavaScript, Node.js and IoT technologies and discover the latest best practices and ideas? You are welcome to the FullStack conference.

This July BEM will be there. Don't think that it will only be about CSS. BEM will present its FullStack platform.

Now is the time of component web. Web Components are actively developing but still have some limitations such as web browsers support. BEM methodology can be applied to any platform and already has implementations which work in all the browsers. It is created as open source software and is suitable for any programming language or any framework.

Let's talk on what do you really know about BEM Methodology and existing BEM Platform. BEM was originated by Yandex more than 10 years ago. It was approved by huge number of large, small and scalable projects, with different developers and changing support teams.

Harry Roberts was one of the first who told about BEM in English speaking world. But he uses only the CSS part of the BEM methodology and doesn't go further. This July at the FullStack conference in London the BEM inventors Sergey Berezhnoy and Vladimir Grinenko will present the Unknown parts of BEM.

4 things you may have missed about BEM methodology:

  • BEM is not only for CSS

BEM is applicable to JavaScript, templates or even native code for mobile apps. In addition to double underscores that changed CSS world, templates and JavaScript written using BEM principles will also significantly change your development process.

BEM has common approach for all technologies: HTML, CSS, JavaScript, docs, tests, etc.

  • BEM has concept of redefinition levels that can work in all technologies

As in CSS, you can change/redefine the appearance of a block, in JavaScript and templates you can change/redefine the behavior of blocks and the layout of tags on a page. The important thing — you do not need to change the initial block implementation, changes will be applied from another redefinition level.

  • BEM has its own file structure & tools

A component-based approach used in the BEM methodology also determines the way that BEM projects are organized in a file structure. In BEM, it's not just the interface that is divided into independent components, i.e. blocks, but the implementation of blocks is also divided into independent parts, namely files.

To ease a work with all BEM components named and stored on a file structure by BEM principles, we created a lot of open source tools.

  • BEM has its own self-titled platform

BEM methodology is simple recommendations for organizing a project that needs to be done quickly, but supported for many years. BEM has a ready-made implementation of these recommendations — BEM Platform — technologies and libraries with open source code.

Want to explore how BEM methodology and platform really work? Join the FullStack conference!

I have a question concerning styles for generic blocks in BEM (for instance .button) vs Media Queries.

The block in BEM (as documentation says) is supposed to have generic styles which will be applicable to all elements on site, let's say I have a ".button" block...

And my button will have reusable styles like:

.button {
    font-family:Verdana;
    padding:30px 20px;
}

The purpose of that generic button is so that if I were to make "another" button, say "welcome button" with different styles I can write modificator button--welcome which will only add additional styles to .button which at the end will look like this:

<button class="button button--welcome"> </button>

This is where Media Queries PROBLEM comes in. Padding defined in my generic .button can be different for different media queries (I am using border-box so padding are internal styles for .button). For instance padding for max-width:480px can be padding: 10px 5px; Does it mean that I should NOT include padding in my generic .button block because .button will no longer be generic? Or, I can do something like this (but I wonder whether it is valid BEM way):

.button {
     font-family:Verdana;
     @media and (max-width: 480px) {
     padding:10px 5px;}
     @media and (max-width: 780px) {
     padding:15px 10px;
     }
     @media and (max-width: 1200px) {
     padding:20px 15px;
     }
     @media and (min-width: 1201px) {
     padding:30px 20px;
     }
}

Also, I've seen some generic .button blocks with the following code:

.button {
  padding: 0.75em 1.25em;
  border-radius: 4px;
  background-color: green;
  color: white;
  font-size: 1em;
  line-height: 1.5em;
  transition: all 0.15s ease-in-out;
}

The issue of generic block styles vs media queries arises in the case of border width, line-height which can be different for different media queries.

I've seen the documentation about external geometry/positioning, but padding is not external geometry: https://en.bem.info/methodology/css/#external-geometry-and-positioning

My issue here is different.

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

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

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!

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.

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.

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?

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...

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 :)

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

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

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)

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.

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

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

srsly another BS drone rule made up by bloggers like the PSR crap and the retarded one with the commas at the beggining of the line in javascript. LET THE CODERS CODE LIKE THEY WANT and stfu

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.

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.

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!

Приветствую!

Как избежать большого кол-ва элементов от 1 блока? Проблема возникает, когда много элементов в блоке, но нужно сохранить зависимость от родительского блока.

Sample

  <section class="meet-us">
    <div class="container">
      <h3 class="meet-us__title heading-3">Meet Us</h3>
      <div class="meet-us__items">
        <div class="meet-us__item">
          <img class="meet-us__img" src="img/team-1.jpg" width="269" height="355" alt="Team member">
          <div class="meet-us__info">
            <h5 class="meet-us__name">Kirkorov</h5>
            <p class="meet-us__metier">Babo-pinatel</p>
            <div class="meet-us__social"> <!--  overlay/display:none -->
              <a href="#" class="meet-us__link">
                <svg class="meet-us__icon">
                  <use xlink:href="img/icons.svg#behance"></use>
                </svg>
              </a>
              <a href="#" class="meet-us__link">
                <svg class="meet-us__icon">
                  <use xlink:href="img/icons.svg#facebook"></use>
                </svg>
              </a>
              <a href="#" class="meet-us__link">
                <svg class="meet-us__icon">
                  <use xlink:href="img/icons.svg#twitter"></use>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="meet-us__item">
          <img class="meet-us__img" src="img/team-2.jpg" width="269" height="355" alt="Team member">
          <div class="meet-us__info">
            <h5 class="meet-us__name">Putin</h5>
            <p class="meet-us__metier">reshala</p>
            <div class="meet-us__social">
              <a href="#" class="meet-us__link">
                <svg class="meet-us__icon">
                  <use xlink:href="img/icons.svg#behance"></use>
                </svg>
              </a>
              <a href="#" class="meet-us__link">
                <svg class="meet-us__icon">
                  <use xlink:href="img/icons.svg#facebook"></use>
                </svg>
              </a>
              <a href="#" class="meet-us__link">
                <svg class="meet-us__icon">
                  <use xlink:href="img/icons.svg#twitter"></use>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

Вместо:

<div class="meet-us__item">
и далее...

или внутри него писать новый блок, например card и:

        <div class="card">
          <img class="card__img" src="" alt="">
          <div class="card__info">
            <h5 class="card__name">Nam</h5>
            <p class="card__metier">Profession</p>
            <div class="social card__social">  <!-- Тут ещё один блок social  -->
              <a href="#" class="social__link">
                <svg class="social__icon">
                  <use xlink:href="img/icons.svg#behance"></use>
                </svg>
              </a>
              <a href="#" class="social__link">
                <svg class="social__icon">
                  <use xlink:href="img/icons.svg#facebook"></use>
                </svg>
              </a>
              <a href="#" class="social__link">
                <svg class="social__icon">
                  <use xlink:href="img/icons.svg#twitter"></use>
                </svg>
              </a>
            </div>
          </div>
        </div>
  1. Правильно ли я разметил по БЭМ-у в 1 примере?
  2. Как мне сохранить зависимость/наследование/связь от родительского блока, то есть meet-us, или если я блок card вставлю внутри meet-us__item, то от него. Добавлять к блоку card второй класс meet-us__card? И как вообще правильно делать?)

Ещё где-то я видел в исходниках какого-то сайта примерно такое:

<div class="block">
  <div class="block__items">
    <div class="block__item">
      <h3 class="block__item-title">BEM</h3>
      <p class="block__item-text">BEM is wow</p>
      <div class="block__item-media">
        <img src="" alt="" class="block__item-img">
      </div>
      <div class="block__item-social">ya.ru</div>
      <div class="block__item-action">More</div>
    </div>
  </div>
</div>

Как вариант?

И видели ли документацию mdl (Material design light)? Пример:

<ul class="demo-list-two mdl-list">
  <li class="mdl-list__item mdl-list__item--two-line">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons mdl-list__item-avatar">person</i>
      <span>Bryan Cranston</span>
      <span class="mdl-list__item-sub-title">62 Episodes</span>
    </span>
    <span class="mdl-list__item-secondary-content">
      <span class="mdl-list__item-secondary-info">Actor</span>
      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
    </span>
  </li>
</ul>

Я просто в документации такого рода примера не заметил или пропустил, верно ли так? Вместо mdl-list__avatar, они пишут: mdl-list__item-avatar, и вообще от элемента mdl-list__item, они создают несколько блоков ниже, они так сохраняют связь, логику от имени item, но правильно ли это, или они так интерпретируют BEM под себя? Это хороший пример, когда много блоков/а точнее элементов внутри. Например, в моём первом примере уже есть meet-us__title, я всё от блока meet-us и размечал, элементами, а вдруг внутри meet-us__item у меня завтра появится ещё заголовок, я уже не смогу написать meet-us__title, так как занято, могу конечно написать meet-us__heading, а гугл в (MDL) написал бы meet-us__item-title, они так избегают элемент в элементе - meet-us__item__title, правильно ли будет делать так как они?

Спасибо.

Русская версия форума у меня не работает, ошибка 500, а до этого пост не мог написать, как и на английской версии, поэтому пишу тут.

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;
    /* .. */
}

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?