Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

BEM multi-word convention for Element or Modifier classes #836

Merged
merged 1 commit into from
Jul 17, 2019
Merged

BEM multi-word convention for Element or Modifier classes #836

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions pages/css/principles/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ Example:

## BEM-style naming and structure

Components and objects should follow the [Block Element Modifier](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) (BEM) model in terms of structure. We've chosen to use a modified form of BEM syntax using [PascalCase](https://en.wikipedia.org/wiki/PascalCase) for the block name, hyphens and lowercase or elements, and double-hyphens and lowercase for modifiers. When a Block class requires two words use PascalCase, for example `ProgressBar`.
Components and objects should follow the [Block Element Modifier](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) (BEM) model in terms of structure. We've chosen to use a modified form of BEM syntax using [Uppercase](https://en.wikipedia.org/wiki/Uppercase) for the block name, hyphens and lowercase or elements, and double-hyphens and lowercase for modifiers. When a Block class requires two words use [PascalCase](https://en.wikipedia.org/wiki/PascalCase), for example `ProgressBar`. When an Element or Modifier class requires two words use [camelCase](https://en.wikipedia.org/wiki/camelCase), for example `[Component]-closeButton` or `[Component]--extraLarge`.

* **Block**: A block includes all of the base styles you want shared across every variation of a component. Minimal thematic styling should be applied to blocks, particularly when variations of a component include visual variations. Apply additional styles with modifers rather than overriding base styles.
* **Element**: An element is part of a component. Elements should work together with other elements and can have modifiers. Element styles should not override block styles - this often results in applying more styles directly to elements rather than having styles flow down from the parent level.
Expand All @@ -107,11 +107,12 @@ Components and objects should follow the [Block Element Modifier](http://csswiza
.Box-header {...}
.Box-body {...}
.Box-footer {...}
.Box-closeButton {...}

// modifiers
.Box--blue {...}
.Box--red {...}
.Box-header--large {...}
.Box--large {...}
.Box--extraLarge {...}
```

## Property order
Expand Down