https://github.com/bem-contrib/pobem
:zap: BEM syntax for CSS
https://github.com/bem-contrib/pobem
Last synced: 6 months ago
JSON representation
:zap: BEM syntax for CSS
- Host: GitHub
- URL: https://github.com/bem-contrib/pobem
- Owner: bem-contrib
- License: other
- Created: 2016-07-11T11:40:48.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-08-06T03:27:58.000Z (almost 7 years ago)
- Last Synced: 2024-11-12T23:33:21.012Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 61.5 KB
- Stars: 14
- Watchers: 2
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: readme.md
- License: license.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/pobem)
[](https://travis-ci.org/bem-contrib/pobem)
[](https://codecov.io/github/bem-contrib/pobem)
[](https://www.npmjs.com/package/pobem)
# Pobem - postcss plugin for BEM
BEM syntax for CSS problem? Use POBEM!
## Overview
### Using with postcss-nested or less/sass
```stylus
block(block).mod(mod val) { /* 1 */
mod(mod2 val2) { /* 2 */
color: #444223;
}
elem(elem) { /* 3 */
width: 100px;
mod(mod val) { /* 4 */
width: 40px;
}
}
> h2 { /* 5 */
opacity: .3;
}
}
```
```css
1 -> .block_mod_val
2 -> .block_mod_val.block_mod2_val2
3 -> .block_mod_val .block__elem
4 -> .block_mod_val .block__elem_mod_val
5 -> .block_mod_val > h2
```
### Using with stylus
```stylus
block(block).mod(mod val)
mod(mod2 val2)
color: #444223
elem(elem)
width: 100px
> h2
opacity: .3
```
### Combined chain syntax
```stylus
block(block).elem(elem) {}
-> .block__elem {}
```
### Using pseudo elements
```stylus
block(block).elem(elem):after {}
-> .block__elem:after {}
```
### Quotes and delimiters between `mod` `val` is optional
`block(block).mod(mod val) === block('block').mod('mod', 'val') === block('block').mod('mod' -> 'val')`
## Usage
`pobem` is a [PostCSS](https://github.com/postcss/postcss) plugin.
### CLI
```sh
npm i -S postcss postcss-cli pobem
```
```sh
postcss --use pobem test.css -o test.css
```
### API
```sh
npm i -S postcss pobem
```
```js
import postcss from 'postcss';
import pobem from 'pobem';
console.log(
postcss([ pobem ]).process('block(block) {}').css
);
// .block {}
```
### webpack
```sh
npm i -S postcss postcss-loader pobem
```
```js
import pobem from 'pobem';
export default {
module: {
loaders: [
{
test: /\.css$/,
loader: 'style!css!postcss'
}
]
},
postcss() {
return [ pobem ];
}
};
```
### Custom delimeters
Default delimeters are `_` for modifiers and `__` for elements, but you can change it with special environment variables. For example in webpack you can do this with `DefinePlugin`:
```js
plugins: [
new webpack.DefinePlugin({
'process.env': {
BEM_MOD_DELIM: JSON.stringify('--'),
BEM_ELEM_DELIM: JSON.stringify('~~')
}
})
]
```