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',
];