https://github.com/yungvldai/fbem

Functional BEM packages 🧱
https://github.com/yungvldai/fbem

bem css functional loader methodology typescript

Last synced: 10 months ago
JSON representation

Functional BEM packages 🧱

• Host: GitHub
• URL: https://github.com/yungvldai/fbem
• Owner: yungvldai
• License: mit
• Created: 2022-11-15T01:04:37.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-12-14T22:57:25.000Z (over 2 years ago)
• Last Synced: 2025-08-08T16:38:08.786Z (11 months ago)
• Topics: bem, css, functional, loader, methodology, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/search?q=%40fbem
• Size: 2.53 MB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Functional BEM

FBEM is a functional implementation of the [BEM methodology](https://en.bem.info/methodology/quick-start/). 

FBEM packages help you clean up your styles and make them clearer and more organized.

## Demo



## Packages

**There is a rule that packages with the same major version must be compatible**

|       Package name      |                                                      Package version                                                      |

|:-----------------------:|:-------------------------------------------------------------------------------------------------------------------------:|

|        [@fbem/core](https://github.com/yungvldai/fbem/tree/master/packages/core)       |              [ ![npm](https://img.shields.io/npm/v/@fbem/core) ]( https://www.npmjs.com/package/@fbem/core )              |

|     [@fbem/css-loader](https://github.com/yungvldai/fbem/tree/master/packages/css-loader)    |        [ ![npm](https://img.shields.io/npm/v/@fbem/css-loader) ]( https://www.npmjs.com/package/@fbem/css-loader )        |

| [@fbem/typescript-plugin](https://github.com/yungvldai/fbem/tree/master/packages/typescript-plugin) | [ ![npm](https://img.shields.io/npm/v/@fbem/typescript-plugin) ]( https://www.npmjs.com/package/@fbem/typescript-plugin ) |

|       [@fbem/utils](https://github.com/yungvldai/fbem/tree/master/packages/utils)       |             [ ![npm](https://img.shields.io/npm/v/@fbem/utils) ]( https://www.npmjs.com/package/@fbem/utils )             |

## Code example

```css

/* style.css */

.block {

  position: relative;

}

.block__elem {

  color: purple;

}

.block__elem_mod_val-a {

  backgound: white;

}

.block__elem_mod_val-b {

  backgound: black;

}

.block__name-with-dashes {

  display: none;

}

.block__name-with-dashes_visible {

  display: block;

}

```

```js

/* index.js */

import { cnBlock, cnBlockElem, cnBlockNameWithDashes } from './style.css';

cnBlock(); // 'block'

cnBlockElem({ mod: 'val-a' }); // 'block__elem block__elem_mod_val-a'

cnBlock({}, ['mix']); // 'block mix'

cnBlockElem({ mod: 'val-b' }, ['mix1', 'mix2']); // 'block__elem block__elem_mod_val-b mix1 mix2'

cnBlockNameWithDashes({ visible: true }); // 'block__name-with-dashes block__name-with-dashes_visible'

```