{"id":16380869,"url":"https://github.com/widoz/bem","last_synced_at":"2025-07-15T06:42:04.242Z","repository":{"id":57075751,"uuid":"119093981","full_name":"widoz/bem","owner":"widoz","description":"BEM library - Take advantage of the bem syntax throught an object.","archived":false,"fork":false,"pushed_at":"2024-11-14T21:35:03.000Z","size":146,"stargazers_count":4,"open_issues_count":3,"forks_count":2,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-03-18T17:24:33.301Z","etag":null,"topics":["bem","composer","library","php","plugin","unittest","wordpress"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/widoz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-26T19:28:01.000Z","updated_at":"2024-12-04T23:22:26.000Z","dependencies_parsed_at":"2022-08-24T14:55:45.962Z","dependency_job_id":null,"html_url":"https://github.com/widoz/bem","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/widoz%2Fbem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/widoz%2Fbem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/widoz%2Fbem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/widoz%2Fbem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/widoz","download_url":"https://codeload.github.com/widoz/bem/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245052659,"owners_count":20553162,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bem","composer","library","php","plugin","unittest","wordpress"],"created_at":"2024-10-11T03:52:41.654Z","updated_at":"2025-03-23T03:33:13.409Z","avatar_url":"https://github.com/widoz.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BEM Library\n\n![Continuous Integration](https://github.com/widoz/bem/workflows/Continuous%20Integration/badge.svg)\n[![codecov](https://img.shields.io/codecov/c/github/widoz/bem/develop.svg?style=flat-square)](https://codecov.io/gh/widoz/bem)\n\nBem is a library that allow you to define BEM style class attribute values to use in your markup.\n\nLet for example you want to include a class attribute value into your html tag.\nYou can do it by using the library.\n\n```html\n\u003cdiv class=\"\u003c?php echo $bem-\u003evalue() ?\u003e\"\u003e\n    \u003c!-- your content here --\u003e\n\u003c/div\u003e\n```\n\nThe library works with WordPress but also as a standalone library to use in your projects.\n\nIf you use it into your WordPress project you can take advantage of the `bem` filter allowing you\nto manipulate the bem string depending on your needs.\n\nIt's is possible to retrieve the entire class value such as the block, element and modifiers singularly.\n\nSince Version 1.0.0 the string values are no longer sanitized, so you have to use a function like `sanitize_html_class`.\nThe classes now only check against the value passed in construction phase.\n\n## Requirements\n\nPHP \u003e= 7.1.33\n\n## What is BEM\n\nBEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development.\n\n\u003cdl\u003e\n\t\u003cdt\u003eBlock\u003c/dt\u003e\n\t\u003cdd\u003eEncapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well.\u003c/dd\u003e\n\t\u003cdt\u003eElement\u003c/dt\u003e\n\t\u003cdd\u003eParts of a block and have no standalone meaning. Any element is semantically tied to its block.\u003c/dd\u003e\n\t\u003cdt\u003eModifier\u003c/dt\u003e\n\t\u003cdd\u003eFlags on blocks or elements. Use them to change appearance, behavior or state.\u003c/dd\u003e\n\u003c/dl\u003e\n\nExample\n\n```css\n.block {}\n\n.block__element {}\n\n.block block--modifier {}\n```\n\nFor more information have a look at: [getbem](http://getbem.com/)\n\n## How it works\n\nTo use the bem value you must create a instance of a class that implements `Valuable` interface such as `Standard` then\ncall `value` method.\n\nSince version 1.0.0 isn't possible to retrieve the bem's components separately, this is because the\nresponsibility to hold data has been moved under a different class that implements `Bem` interface.\n\nAlso, the `modifiers` are no longer an array but an instance of a class that implements `Modifiable`.\nThe class used to hold modifiers is `BlockModifier`.\n\n```php\n$bem = new Data('block');\n$standard = new Standard($bem);\n$standard-\u003evalue(); // will print 'block'\n\n$bem = new Data('block', 'element');\n$standard = new Standard($bem);\n$standard-\u003evalue(); // will print 'block__element'\n\n$modifiers = new BlockModifiers(['modifier'], 'block');\n$bem = new Data('block', 'element', $modifiers);\n$standard = new Standard($bem);\n$standard-\u003evalue(); // will print 'block block--modifier'\n```\n\n## Factory\n\nTo create a bem as you seen above isn't much complex but isn't simple as doing it in one line of code\n(if you want to keep your code readable). For that reason you make use of a simple `Factory` class\nthat allow you to create all of the Bem classes you want just in one line of code by passing only\nthe necessary data.\n\n```php\n$standardBem = Factory::createStandard('block', 'element', ['modifier']);\n```\n\nThen you can use the object as usual, by calling the method `value`.\n\n**Note:**\nEven though it's possible to pass all of the parameters to the class that implements `Bem` interface,\nwhen both *block* and *modifiers* are passed the *element* is ignored.\n\nThis is right and in line with the BEM requirements. Infact isn't possible to have a BEM string like `block block--modifier__element`.\n\n## Service\n\nCreating one object for every changes you need to make when you are building a component or a block\nfor you project can be quite prolix and useless because most of the time what you want to do is to have\na `block` and than change the `element` or the `modifier` parts.\n\nFor this reason `Bem` offer a configurable service with which is possible to set only the `block`\npart of the bem object so you can inject it into your classes and change only the parts needed during\nthe component building.\n\n```php\n$service = Factory::createServiceForStandard('block');\n```\n\nThen you can make use of `forElement` and `withModifiers` methods to update the bem object.\n\n```php\nclass MyBlockClass\n{\n    private $bemService;\n\n    public function __construct(Service $bemService)\n    {\n        $this-\u003ebemService = $bemService;\n    }\n\n    public function buildComponentElement()\n    {\n        $element = $this-\u003ebemService-\u003eforElement('element');\n        $subElement = $this-\u003ebemService-\u003eforElement('sub-element');\n        ?\u003e\n            \u003cdiv class=\"\u003c?= $element-\u003evalue() ?\u003e\"\u003e\n                \u003cdiv class=\"\u003c?= $subelement-\u003evalue() ?\u003e\"\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c?php\n    }\n\n    public function buildBlockVariant()\n    {\n        $blockVariant = $this-\u003ebemService-\u003ewithModifiers(['modifier']);\n        ?\u003e\n        \u003cdiv class=\"\u003c?= $blockVariant-\u003evalue() ?\u003e\"\u003e\n        \u003c/div\u003e\n        \u003c?php\n    }\n}\n```\n\n## Add more than one modifier\n\nIt's possible to pass more than one modifier to `BlockModifier` infact the `__construct` method\nget an array of strings.\n\nSo for example, the following code will output `block block--modifier-one block--modifier-two`.\n\n```php\n$modifiers = new BlockModifiers(['modifier', 'modifier-two'], 'block');\n$bem = new Data('block', 'element', $modifiers);\n$standard = new Standard($bem);\n$standard-\u003evalue(); // will print 'block block--modifier block--modifier-two'\n```\n\nSince version 1.0.0 there are additional checks to the *block*, *element* and *modifier* values to ensure\na valid string is passed during construction. The check is made against the pattern `[^a-zA-Z0-9\\-\\_]`.\n\n### Retrieve properties.\n\nSince version 1.0.0 it's no longer possible to retrieve the bem components from the `Valuable` instance,\nyou have to use `Data` instance if you want to get them.\n\n## Bugs\n\nTo report a bug simply open an [issue on github project](https://github.com/widoz/bem/issues)\n\n## License\n\nThis library is license under MIT\n\nFor more info read the `LICENSE` file\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwidoz%2Fbem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwidoz%2Fbem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwidoz%2Fbem/lists"}