README

BEM — 是一种方法，可以帮助您在前端开发中创建可重用组件和代码共享

用法

创建一个类实例来表示您的BEM模型。将“块”作为构造函数参数传递。

$bem = new \AKlump\Bem\Fluent\Bem('foo');

所有方法都返回一个对象实例，该实例可以转换为字符串。或者，您也可以根据需要调用 toString() 或 toArray()；有关详细信息，请参阅 \AKlump\Bem\Fluent\Interfaces\OutputInterface。以下所有代码产生相同的输出。

(string) $bem->block(); // foo
strval($bem->block()); // foo
$bem->block()->toString(); // 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"

JavaScript用途

(string) $bem->block()->js(); // "js-foo"
(string) $bem->element('content')->js(); // "js-foo__content"

便利语法

有一些便利之处需要注意；特别关注 plus* 方法。

// 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()

"全局"创新

您将在本项目中发现一种名为全局的创新。它可以一次性针对所有块的公共部分进行定位。以下示例中，component 和 component__content 分别代表 全局块 和 全局元素。这种创新在此处允许您在单行CSS中定位所有三个组件的 content。这可以被视为一种分组方法。使用 plusGlobal() 方法实现此功能。

<section>
  <div class="story component">
    <div class="story__content component__content"></div>
  </div>
  <div class="film component">
    <div class="film__content component__content"></div>
  </div>
  <div class="copy component">
    <div class="copy__content component__content"></div>
  </div>
</section>

.component__content {
  width: 900px;
  margin: auto;
}

$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"

转换为数组

给定以下复杂链，您可以看到 plus* 方法的有用性以及为什么您可能想要使用 toArray() 方法。

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

自定义输出样式

要更改类的格式，创建一个新的自定义类，该类实现了 \AKlump\Bem\Styles\StyleInterface 以控制类的处理和输出，包括分隔符。请参考 \AKlump\Bem\Styles\Official。在构建时将您的自定义样式传递给 \AKlump\Bem\Fluent\Bem。

与Twig一起使用

主题设计师

{{ bem_set_global('component') }}
{{ bem_set_block('story-section') }}
<body>
<h1>Twig Extension Example</h1>

<pre>
{% set classes = [
  bem_block().plus_js(),
  bem_block().modifier('th-summary'),
  bem_block().modifier('lang-en'),
] %}
&lt;section>
  &ltdiv class="{{ classes|join(' ') }}">
    &lt;div class="{{ bem_element('width').plus_global() }}">
      &lt;div class="{{ bem_element('item').plus_modifier('first') }}">&lt;/div>
      &lt;div class="{{ bem_element('item') }}">&lt;/div>
      &lt;div class="{{ bem_element('item').plus_modifier('last') }}">&lt;/div>
    &lt;/div>
  &lt;/div>
&lt;/section>
</pre>
</body>

<section>
  <div class="story-section js-story-section story-section--th-summary story-section--lang-en">
    <div class="story-section__width component__width">
      <div class="story-section__item story-section__item--first"></div>
      <div class="story-section__item"></div>
      <div class="story-section__item story-section__item--last"></div>
    </div>
  </div>
</section>

开发者

请参阅 \AKlump\Bem\Twig\BemExtension

贡献

如果您觉得这个项目很有用...请考虑捐赠。

aklump / bem

维护者

详细信息