Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vkalinichev/bemed-components
BEM-flavored components
https://github.com/vkalinichev/bemed-components
bem bem-methodology bemed-components react
Last synced: 3 days ago
JSON representation
BEM-flavored components
- Host: GitHub
- URL: https://github.com/vkalinichev/bemed-components
- Owner: vkalinichev
- License: mit
- Created: 2017-06-08T16:57:53.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-07-30T08:06:40.000Z (over 7 years ago)
- Last Synced: 2024-02-09T02:37:00.991Z (9 months ago)
- Topics: bem, bem-methodology, bemed-components, react
- Language: JavaScript
- Size: 52.7 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# bemed components
[![npm][npm-img]][npm]
[![Build Status][ci-img]][ci]
[![npm][npm-dwnlds-img]][npm]
[![Package Quality][quality-img]][quality]
[![license][lic-img]][lic]
[npm-img]: https://img.shields.io/npm/v/bemed-components.svg
[npm]: https://npmjs.org/package/bemed-components
[ci-img]: https://img.shields.io/travis/vkalinichev/bemed-components.svg
[ci]: https://travis-ci.org/vkalinichev/bemed-components
[npm-dwnlds-img]: https://img.shields.io/npm/dt/bemed-components.svg
[quality-img]: http://npm.packagequality.com/shield/bemed-components.svg
[quality]: http://packagequality.com/#?package=bemed-components
[lic-img]: https://img.shields.io/github/license/vkalinichev/bemed-components.svg
[lic]: https://github.com/vkalinichev/bemed-components/blob/master/License
BEM-flavored React Components.
[styled-components] is great! It allows to write clean JSX code.
But sometimes you want to keep CSS in CSS.
[BEM] is fabulous and time-tested but working directly
with its classnames in markup is not a pleasure.
**bemed components** allows to write expressive and clean JSX code.
Its just creates an shortcutted Components with BEM classnames inside.
## Install
```shell
npm install bemed-components
```
## Usage
### Prepares: import, create Block context
```javascript
import bemed from 'bemed-components'
const b = bemed('home')
```
### Declare Blocks
```javascript
const Home = b()
```
### Declare Elements
```javascript
const Roof = b('roof', { mod: ['color']})
const Door = b('door', { mod: ['opened']})
const Windows = b('windows')
const Window = b.span('window', { mod: ['large']})
```
### Write clean and expressive JSX
```jsx
const BemedComponent = ({opened}) => (
+
+
)
```
That will be compiled to
```jsx
const BemedComponent = ({opened}) => (
+
+
)
```
---
With gratitude and great respect for [BEM] and [styled-components]
[BEM]: https://bem.info/methodology
[styled-components]: https://www.styled-components.com