PHPackages                             wwwision/bem - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. wwwision/bem

ActiveNeos-package[Utility & Helpers](/categories/utility)

wwwision/bem
============

BEM style classes (see http://getbem.com/) with Neos Fusion

1.3.0(2y ago)47002MITPHP

Since Apr 4Pushed 2y ago1 watchersCompare

[ Source](https://github.com/bwaidelich/Wwwision.BEM)[ Packagist](https://packagist.org/packages/wwwision/bem)[ Fund](https://www.paypal.me/bwaidelich)[ GitHub Sponsors](https://github.com/bwaidelich)[ RSS](/packages/wwwision-bem/feed)WikiDiscussions master Synced 4d ago

READMEChangelog (4)Dependencies (1)Versions (5)Used By (0)

Wwwision.BEM
============

[](#wwwisionbem)

BEM style classes (see ) with Neos Fusion

Installation
------------

[](#installation)

```
composer require wwwision/bem

```

(Alternatively feel free to copy and adjust the parts that you need)

Usage
-----

[](#usage)

### Eel Helper

[](#eel-helper)

This package provides a simple Eel-Helper `BEM.block()` that can be used to render BEM-style class names:

```
${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 Prototype

[](#fusion-prototype)

For more advanced usage the Fusion Prototypes `Wwwision.BEM:Block` and `Wwwision.BEM:Modifier` are provided that allow to reuse and extend BEM-style classes more easily:

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

```

The above will render `some-block some-block--wide`. For fixed modifier names, the syntax can be condensed to:

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

```

### Use with AFX Components

[](#use-with-afx-components)

The helpers are especially useful in conjunction with AFX Components:

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

            {props.header}
            {props.content}
            ...

    `
}

root = afx``

```

This would result in the following markup:

```

    some header
    some content
    ...

```

License
-------

[](#license)

Licensed under MIT, see [LICENSE](LICENSE)

###  Health Score

31

—

LowBetter than 68% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity19

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity63

Established project with proven stability

 Bus Factor1

Top contributor holds 78.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~510 days

Total

4

Last Release

1065d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/307571?v=4)[Bastian Waidelich](/maintainers/bwaidelich)[@bwaidelich](https://github.com/bwaidelich)

---

Top Contributors

[![bwaidelich](https://avatars.githubusercontent.com/u/307571?v=4)](https://github.com/bwaidelich "bwaidelich (11 commits)")[![Sebobo](https://avatars.githubusercontent.com/u/596967?v=4)](https://github.com/Sebobo "Sebobo (2 commits)")[![markuspfeifenberger](https://avatars.githubusercontent.com/u/7107293?v=4)](https://github.com/markuspfeifenberger "markuspfeifenberger (1 commits)")

### Embed Badge

![Health badge](/badges/wwwision-bem/health.svg)

```
[![Health](https://phpackages.com/badges/wwwision-bem/health.svg)](https://phpackages.com/packages/wwwision-bem)
```

###  Alternatives

[neos/fusion-form

Fusion Form

19724.3k31](/packages/neos-fusion-form)[packagefactory/atomicfusion-proptypes

Fusion port of react-propTypes for the fusion-prototypes PackageFactory.AtomicFusion:Component and Neos.Fusion:Component

12200.0k4](/packages/packagefactory-atomicfusion-proptypes)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)