Download the PHP package widoz/bem without Composer
On this page you can find all versions of the php package widoz/bem. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Package bem
Short Description Bem convention as class
License MIT
Homepage https://github.com/widoz/bem
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package bem
BEM Library
Bem is a library that allow you to define BEM style class attribute values to use in your markup.
Let for example you want to include a class attribute value into your html tag. You can do it by using the library.
The library works with WordPress but also as a standalone library to use in your projects.
If you use it into your WordPress project you can take advantage of the bem filter allowing you
to manipulate the bem string depending on your needs.
It's is possible to retrieve the entire class value such as the block, element and modifiers singularly.
Since Version 1.0.0 the string values are no longer sanitized, so you have to use a function like sanitize_html_class.
The classes now only check against the value passed in construction phase.
Requirements
PHP >= 7.1.33
What is BEM
BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development.
- Block
- Encapsulates 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.
- Element
- Parts of a block and have no standalone meaning. Any element is semantically tied to its block.
- Modifier
- Flags on blocks or elements. Use them to change appearance, behavior or state.
Example
For more information have a look at: getbem
How it works
To use the bem value you must create a instance of a class that implements Valuable interface such as Standard then
call value method.
Since version 1.0.0 isn't possible to retrieve the bem's components separately, this is because the
responsibility to hold data has been moved under a different class that implements Bem interface.
Also, the modifiers are no longer an array but an instance of a class that implements Modifiable.
The class used to hold modifiers is BlockModifier.
Factory
To create a bem as you seen above isn't much complex but isn't simple as doing it in one line of code
(if you want to keep your code readable). For that reason you make use of a simple Factory class
that allow you to create all of the Bem classes you want just in one line of code by passing only
the necessary data.
Then you can use the object as usual, by calling the method value.
Note:
Even though it's possible to pass all of the parameters to the class that implements Bem interface,
when both block and modifiers are passed the element is ignored.
This is right and in line with the BEM requirements. Infact isn't possible to have a BEM string like block block--modifier__element.
Service
Creating one object for every changes you need to make when you are building a component or a block
for you project can be quite prolix and useless because most of the time what you want to do is to have
a block and than change the element or the modifier parts.
For this reason Bem offer a configurable service with which is possible to set only the block
part of the bem object so you can inject it into your classes and change only the parts needed during
the component building.
Then you can make use of forElement and withModifiers methods to update the bem object.
Add more than one modifier
It's possible to pass more than one modifier to BlockModifier infact the __construct method
get an array of strings.
So for example, the following code will output block block--modifier-one block--modifier-two.
Since version 1.0.0 there are additional checks to the block, element and modifier values to ensure
a valid string is passed during construction. The check is made against the pattern [^a-zA-Z0-9\-\_].
Retrieve properties.
Since version 1.0.0 it's no longer possible to retrieve the bem components from the Valuable instance,
you have to use Data instance if you want to get them.
Bugs
To report a bug simply open an issue on github project
License
This library is license under MIT
For more info read the LICENSE file
