Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ahmetozantekin/get-bem
sass library for easily generating BEM methodology style classes
https://github.com/ahmetozantekin/get-bem
Last synced: about 1 month ago
JSON representation
sass library for easily generating BEM methodology style classes
- Host: GitHub
- URL: https://github.com/ahmetozantekin/get-bem
- Owner: ahmetozantekin
- Created: 2021-11-01T11:15:35.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2021-11-01T11:31:24.000Z (about 3 years ago)
- Last Synced: 2024-10-23T17:55:51.963Z (2 months ago)
- Language: SCSS
- Homepage:
- Size: 746 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# get-bem
[](https://badge.fury.io/js/get-bem)
A sass library from easily generating BEM methodology style classes
## Installation
````bash
npm i get-bem
````
````bash
yarn add get-bem
````
## Usage
Import it into your main stylesheet:
````scss
@import 'get-bem.scss';
````
## Example
````scss
@import 'get-bem.scss';
@include block("content") {
width: 100%;
@include modifier('hidden') {
visibility: hidden;
}
@include element('body') {
display: flex;
justify-content: center;
font-size: 1.1rem;
@include modifier('small') {
font-size: 1rem;
}
@include modifier('tiny') {
font-size: .75rem;
}
@include element('image') {
width: 200px;
height: 200px;
}
}
@include element('footer') {
border-top: 1px solid initial;
}
}
````
The compiled CSS:
````css
.content {
width: 100%;
}
.content--hidden {
visibility: hidden;
}
.content__body {
display: flex;
justify-content: center;
font-size: 1.1rem;
}
.content__body--small {
font-size: 1rem;
}
.content__body--tiny {
font-size: 0.75rem;
}
.content__body__image {
width: 200px;
height: 200px;
}
.content__footer {
border-top: 1px solid initial;
}
````
### Configs
By default BEM Constructor uses the following BEM convention:
- Two underscores (__) for elements
- Two hyphens for modifiers (--).
You can customize them:
````scss
$element-seperator: '_E_'; // Defaults to '__'
$modifier-seperator: '-M-'; // Defaults to '--'
````
### What the BEM?
BEM (Block, Element, Modifier) is a naming convention methodology that makes your css reusable understandable, easier, scalable.
[More info](http://getbem.com/)