README

BEM 是一个库，允许您定义 BEM 风格的类属性值以用于您的标记。

例如，您想要将类属性值包含到 HTML 标签中。您可以通过使用该库来实现。

<div class="<?php echo $bem->value() ?>">
    <!-- your content here -->
</div>

该库与 WordPress 兼容，也可以作为独立库用于您的项目。

如果您在 WordPress 项目中使用它，可以利用 bem 过滤器，允许您根据您的需求操作 bem 字符串。

可以单独检索整个类值，如块、元素和修饰符。

从版本 1.0.0 开始，字符串值不再进行清理，因此您必须使用像 sanitize_html_class 这样的函数。现在类只检查构造阶段传入的值。

要求

PHP >= 7.1.33

什么是 BEM

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

块

封装了一个独立的实体，它本身就有意义。虽然块可以嵌套并相互交互，但它们的语义上仍然是平等的；没有优先级或层次结构。没有 DOM 表示的整体实体（如控制器或模型）也可以是块。

元素

块的部分，没有独立的意义。任何元素在语义上都与它的块相关。

修饰符

在块或元素上的标志。使用它们来更改外观、行为或状态。

示例

.block {}

.block__element {}

.block block--modifier {}

更多信息请参阅： getbem

如何工作

要使用 bem 值，您必须创建一个实现 Valuable 接口的类的实例，例如 Standard，然后调用 value 方法。

从版本 1.0.0 开始，不再可能单独检索 bem 的组件，这是因为在另一个实现 Bem 接口的类下已经将数据持有责任移动。

此外，modifiers 也不再是数组，而是一个实现 Modifiable 接口的类的实例。用于存储修饰符的类是 BlockModifier。

$bem = new Data('block');
$standard = new Standard($bem);
$standard->value(); // will print 'block'

$bem = new Data('block', 'element');
$standard = new Standard($bem);
$standard->value(); // will print 'block__element'

$modifiers = new BlockModifiers(['modifier'], 'block');
$bem = new Data('block', 'element', $modifiers);
$standard = new Standard($bem);
$standard->value(); // will print 'block block--modifier'

工厂

如上所示创建 bem 不是很复杂，但也不简单，因为它需要一行代码（如果您想保持代码可读性）。因此，您使用一个简单的 Factory 类，该类允许您通过仅传递必要的数据，在单行代码中创建所有所需的 Bem 类。

$standardBem = Factory::createStandard('block', 'element', ['modifier']);

然后您可以使用对象，就像调用 value 方法一样。

注意：尽管可以将所有参数传递给实现 Bem 接口的类，但当 block 和 modifiers 都传递时，element 被忽略。

这是正确的，并且符合 BEM 的要求。实际上，不可能有像 block block--modifier__element 这样的 BEM 字符串。

服务

在构建组件或项目中的块时，为每次更改创建一个对象可能相当繁琐且无用，因为大多数情况下您想要的只是有一个 block，然后更改 element 或 modifier 部分。

因此，Bem 提供了一个可配置的服务，通过该服务可以设置 bem 对象的 block 部分，因此您可以将其注入到类中，并在构建组件期间仅更改所需的部分。

$service = Factory::createServiceForStandard('block');

然后你可以使用forElement和withModifiers方法来更新bem对象。

class MyBlockClass
{
    private $bemService;

    public function __construct(Service $bemService)
    {
        $this->bemService = $bemService;
    }

    public function buildComponentElement()
    {
        $element = $this->bemService->forElement('element');
        $subElement = $this->bemService->forElement('sub-element');
        ?>
            <div class="<?= $element->value() ?>">
                <div class="<?= $subelement->value() ?>">
                </div>
            </div>
        <?php
    }

    public function buildBlockVariant()
    {
        $blockVariant = $this->bemService->withModifiers(['modifier']);
        ?>
        <div class="<?= $blockVariant->value() ?>">
        </div>
        <?php
    }
}

添加多个修饰符

实际上，可以向BlockModifier传递多个修饰符，其构造函数接收一个字符串数组。

例如，以下代码将输出block block--modifier-one block--modifier-two。

$modifiers = new BlockModifiers(['modifier', 'modifier-two'], 'block');
$bem = new Data('block', 'element', $modifiers);
$standard = new Standard($bem);
$standard->value(); // will print 'block block--modifier block--modifier-two'

从版本1.0.0开始，对block、element和modifier值进行了额外的检查，以确保在构造过程中传递了有效的字符串。检查是对模式[^a-zA-Z0-9\-\_]进行的。

检索属性。

从版本1.0.0开始，不再可以从Valuable实例中检索bem组件，如果你想要获取它们，必须使用Data实例。

错误

要报告错误，只需在github项目上创建一个问题

许可

本库采用MIT许可

有关更多信息，请阅读LICENSE文件