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（块 元素 修饰符）是一种方法论，有助于你在前端开发中创建可重用组件和代码共享。

块

封装了一个独立的有意义的实体。虽然块可以嵌套并相互交互，但在语义上它们是平等的；没有优先级或层次结构。没有 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 字符串。

服务

在构建组件或项目中的块时，为每次所需更改创建一个对象可能会非常冗长且无意义，因为大部分情况下你只想拥有一个 块，然后更改 元素 或 修饰符 部分。

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

$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 传递多个修饰符，因为其 __construct 方法接受一个字符串数组。

例如，以下代码将输出 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 开始，对 块、元素 和 修饰符 的值进行了额外的检查，以确保构造过程中传递的是有效的字符串。检查是针对模式 [^a-zA-Z0-9\-\_] 进行的。

检索属性。

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

错误

要报告错误，只需在 github 项目 上打开一个问题。

许可证

此库受 MIT 许可证许可

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