https://github.com/michaelschwobe/bemit-cheatsheet
Give developers more knowledge about how the classes behave in a non-relative sense: BEM + ITCSS = BEMIT
https://github.com/michaelschwobe/bemit-cheatsheet
bem bemit cheatsheet css itcss namespace
Last synced: 11 months ago
JSON representation
Give developers more knowledge about how the classes behave in a non-relative sense: BEM + ITCSS = BEMIT
- Host: GitHub
- URL: https://github.com/michaelschwobe/bemit-cheatsheet
- Owner: michaelschwobe
- Created: 2015-08-10T19:49:49.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-08-10T19:50:02.000Z (almost 11 years ago)
- Last Synced: 2025-05-15T18:47:37.186Z (about 1 year ago)
- Topics: bem, bemit, cheatsheet, css, itcss, namespace
- Homepage:
- Size: 97.7 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# BEMIT Cheatsheet
Give developers more knowledge about how the classes behave in a non-relative sense: BEM + ITCSS = BEMIT
- [More Transparent UI Code with Namespaces](http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/)
- [BEMIT: Taking the BEM Naming Convention a Step Further](http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/)
## Evolution
BEM:
```css
.block__element--modifier {}
```
BEM w/ Namespaces:
```css
.namespace-block__element--modifier {}
```
BEM w/ Namespaces & Responsive Suffixes:
```css
.namespace-block__element--modifier\@suffix {}
```
## Namespaces
Object
```css
.o-object-name[|] {}
```
Component
```css
.c-component-name[|] {}
```
Utility
```css
.u-utility-name {}
```
Theme
```css
.t-theme-name {}
```
Scope
```css
.s-scope-name {}
```
State
```css
.[is|has]-state {}
```
Hack
```css
._hack-name {}
```
Javascript
```css
.js-component-name {}
```
Quality Assurance
```css
.qa-node-name {}
```
## Responsive Suffixes
Breakpoints
```css
.o-object-name\@sm {}
.o-object-name\@md {}
.o-object-name\@lg {}
```
Media type
```css
.u-utility-name\@print {}
```