PHP code example of aklump / bem
1. Go to this page and download the library: Download aklump/bem library . Choose the download type require .
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
aklump / bem example snippets
$bem = new \AKlump\Bem\Fluent\Bem('foo');
(string) $bem->block(); // "foo"
(string) $bem->element('content'); // "foo__content"
(string) $bem->block()->modifier('has-image'); // "foo--has-image"
(string) $bem->element()->modifier('content', 'has-image'); // "foo__content--has-image"
(string) $bem->block()->js(); // "js-foo"
(string) $bem->element('content')->js(); // "js-foo__content"
// In both cases "foo js-foo" === $classes.
$classes = $bem->block() . ' ' . $bem->block()-js();
$classes = $bem->block()->plusJs();
// In both cases "foo foo--bar" === $classes.
$classes = $bem->block() . ' ' . $bem->block()->modifier('bar);
$classes = $bem->block()->plusModifier('bar);
// In both cases "foo foo--bar js-foo js-foo--bar" === $classes.
$classes = implode(' ', [
$bem->block(),
$bem->block()->modifier('bar),
$bem->block()->js(),
$bem->block()->modifier('bar)->js(),
]);
$classes = $bem->block()->plusModifier('bar)->plusJs()
$story = new \AKlump\Bem\Fluent\Bem('story', 'component');
$film = new \AKlump\Bem\Fluent\Bem('film', 'component');
$copy = new \AKlump\Bem\Fluent\Bem('copy', 'component');
$story->element('content')->plusGlobal(); // "story__content component__content"
$film->element('content')->plusGlobal(); // "film__content component__content"
$copy->element('content')->plusGlobal(); // "copy__content component__content"
$bem = new \AKlump\Bem\Fluent\Bem('foo', 'components');
$classes = $bem->element('content')
->plusModifier('first')
->plusGlobal()
->plusJs()
->toArray();
$classes === [
'foo__content',
'foo__content--first',
'js-foo__content',
'js-foo__content--first',
'js-components__content',
'js-components__content--first',
'components__content',
'components__content--first',
];