Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xobotyi/bem
The fastest BEM class name generator
https://github.com/xobotyi/bem
Last synced: 2 months ago
JSON representation
The fastest BEM class name generator
- Host: GitHub
- URL: https://github.com/xobotyi/bem
- Owner: xobotyi
- License: mit
- Created: 2020-06-10T20:15:34.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-11-01T00:30:59.000Z (about 1 year ago)
- Last Synced: 2024-10-14T03:06:53.888Z (3 months ago)
- Language: TypeScript
- Size: 1.22 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @xobotyi/bem
The fastest BEM class name generator
[](https://www.npmjs.com/package/@xobotyi/bem)
[](https://www.npmjs.com/package/@xobotyi/bem)
[](https://www.npmjs.com/package/@xobotyi/bem)
[](https://github.com/xobotyi/bem/actions)
[](https://app.codecov.io/gh/xobotyi/bem)
[](https://www.npmjs.com/package/@xobotyi/bem)
[](https://bundlephobia.com/result?p=@xobotyi/bem)
---
❤️Please consider starring this project to show your love and support.🙌
---
As handwriting BEM-compatible class names is quite painful and existing couple of packages are slow or lack of
functionality needed for me (such as prefixing) — this package exists.
Also as figures this package the [fastest](/benchmark) one I know about🚀
And turns this:
```jsx
import * as react from "react";
export function component(){
return (
Block title
Button left
Button right
);
}
```
into this:
```jsx
import * as react from "react";
import { BEM } from "@xobotyi/bem";
const bem = BEM.extend({prefix: "MY"}); // in real world this row will be a single per project
// and initialized elsewhere
const b = bem.lock('blockName');
export function component(){
return (
Block title
Button left
Button right
);
}
```
#### Installation note
This package written in TypeScript and delivered with 3 versions:
- `main` field of `package.json` is pointing to transpiled ES5 version with CJS modules resolution;
- `module` field is pointing to transpiled ES5 version with ES modules resolution;
- `esnext` field is pointing to the ESNext version with ES modules resolution;
Depending on your targets you may have to use [Webpack](https://webpack.js.org/) and/or
[Babel](http://babeljs.io/) to pull untranspiled version of package.
See some tips on wiring thing up: [https://2ality.com/2017/06/pkg-esnext.html](https://2ality.com/2017/06/pkg-esnext.html)
## Usage
##### Regular BEM
By default component provides default BEM syntax
```typescript
import { BEM } from "@xobotyi/bem";
// blocks
BEM('block', ['large', 'disabled'], 'random_classname'); // block block_large block_disabled random_classname
// or
BEM('block', { size: 'large', disabled: true }); // block block_size_large block_disabled
// elements
BEM('block', 'element', { size: 'large' }); // block__element block__element_size_large
```
##### Syntax alternation
But you easily can alter any of separators as you wish, add prefix or make modifier-only generation as declared
in BEViS syntax notation.
```typescript
import { BEM } from "@xobotyi/bem";
const myBem = BEM.extend({
prefix: 'PFX',
prefixDelimiter: '__',
elementDelimiter: '-',
modifierDelimiter: '_',
modifierValueDelimiter: '_',
fullModifier: false,
});
// blocks
myBem('block', ['large', 'disabled']); // PFX__block _large _disabled
// or
myBem('block', { size: 'large', disabled: true }); // PFX__block _size_large _disabled
// elements
BEM('block', 'element', { size: 'large' }); // PFX__block-element _size_large
```
##### Block and Element baking
In order to improve performance it is possible to `bake-in` block and element name
```typescript jsx
import * as react from "react";
import { BEM } from "@xobotyi/bem";
const b = BEM.lock('block');
function render(){
return (
);
}
```
### Performance (recent benchmark results)
Benchmark results can be found in the [`benchmark`](/benchmark) directory.
To run benchmarks simply clone this repo and make `yarn && yarn benchmark`.
## Related projects
- [cnbuilder](https://www.npmjs.com/package/cnbuilder) — Yet another classname string builder (the fastest one).
- [react-scrollbars-custom](https://www.npmjs.com/package/react-scrollbars-custom) — The best React custom scrollbars component. Allows you to customise scrollbars as you like it, crossbrowser!
- [zoom-level](https://www.npmjs.com/package/zoom-level) — A comprehensive cross-browser package that allow you to determine page's and element's zoom level.
- [@xobotyi/scrollbar-width](https://www.npmjs.com/package/@xobotyi/scrollbar-width) — A tool to get browser's scrollbars width.
- [@xobotyi/should-reverse-rtl-scroll](https://www.npmjs.com/package/@xobotyi/should-reverse-rtl-scroll) — A tool detecting if RTL scroll value should be negative.