README

BEM样式类（见http://getbem.com/）与Neos Fusion结合

安装

composer require wwwision/bem 

（或者您可以自由地复制并调整您需要的部分）

使用方法

Eel Helper

此包提供了一个简单的Eel-Helper BEM.block()，可用于渲染BEM样式类名

${BEM.block('some-component')} // => "some-component"
${BEM.block('some-component', ['foo', 'bar'])} // => "some-component some-component--foo some-component--bar"
${BEM.block('some-component').element('some-element')} // => "some-component__some-element"
${BEM.block('some-component').extend('sub')} // => "some-component-sub"

Fusion原型

对于更高级的使用，提供了Fusion原型Wwwision.BEM:Block和Wwwision.BEM:Modifier，这使得重用和扩展BEM样式类更加容易

root = Wwwision.BEM:Block {
    block = 'some-block'
    modifiers {
        wide = Wwwision.BEM:Modifier {
            name = 'wide'
            active = ${isWide}
        }
    }
}

上面的代码将渲染some-block some-block--wide。对于固定的修饰符名称，语法可以简化为

root = Wwwision.BEM:Block {
    block = 'some-block'
    modifiers {
        'wide' = ${isWide}
    }
}

与AFX组件一起使用

这些助手与AFX组件结合使用特别有用

prototype(Some:Component) < prototype(Neos.Fusion:Component) {

    header = ''
    content = ''
    level = 1

    renderer.@context {
        class = Wwwision.BEM:Block {
            block = 'some-block'
            modifiers {
                'foo' = true
                dynamic = Wwwision.BEM:Modifier {
                    name = ${'level-' + props.level}
                }
            }
        }
    }
    renderer = afx`
        <section class={class}>
            <h1 class={class.element('header')}>{props.header}</h1>
            <p class={class.element('content')}>{props.content}</p>
            <div class={class.extend('nested')}>...</div>
        </section>
    `
}

root = afx`<Some:Component header="some header" content="some content" level={2} />`

这将生成以下标记

<section class="some-block some-block--foo some-block--level-2">
    <h1 class="some-block__header">some header</h1>
    <p class="some-block__content">some content</p>
    <div class="some-block-nested">...</div>
</section>

许可证

根据MIT许可证发布，见LICENSE