bem-react-core

Header-Inner.js

import { decl } from 'bem-react-core'

export default decl({
  block: 'Header',
  elem: 'Inner',
  attrs({ id }) {
    return { id }
  }
})

Header.js

import { decl } from 'bem-react-core'

export default decl({
  block: 'Header',
  tag: 'header',
  content({ service }) {
    return `Yandex.${service}`
  }
})

Header_custom.js

import { declMod } from 'bem-react-core'

export default declMod({ custom: true }, {
  block: 'Header',
  content() {
    return `My ${this.__base(...arguments)}`
  }
})

index.html

<div id="root">
   <div>
     <header class="Header">Yandex.Search</header>
   </div>
</div>

index.jsx

import React from 'react'
import ReactDOM from 'react-dom'

import Header from 'b:Header'

const Root = () => 
  <div>
    <Header service="Search"/>
  </div>
  
 ReactDOM.render(<Root />, document.getElementById('root'))

index2.html

<div id="root">
   <div>
     <header class="Header Header_custom">My Yandex.Search</header>
   </div>
</div>

index2.jsx

import React from 'react'
import ReactDOM from 'react-dom'

import Header from 'b:Header m:custom'

const Root = () => 
  <div>
    <Header custom service="Search"/>
  </div>
  
 ReactDOM.render(<Root />, document.getElementById('root'))

require.js

require('./Header.js')
require('./Header.css')