primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-28 22:01:43 +03:00
Code Issues Projects Releases Wiki Activity

Fix minor typo

Browse Source 
Typo at   "hyphens and lowercase or elements"
Fixed      "hyphens and lowercase for elements"
This commit is contained in:
Anit Shrestha Manandhar 2020-06-03 19:02:45 +05:45 committed by GitHub
parent b8168fc91f
commit da6051662e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 1 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/content/principles/index.md
View File

@ -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 [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`.
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 for 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.