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

fix 'lowecase' typo #313

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix 'lowecase' typo #313

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
6 changes: 3 additions & 3 deletions src/pages/naming.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@ Encapsulates a standalone entity that is meaningful on its own. While blocks can

| Naming | HTML | CSS |
| ------ | ---- | --- |
| Block names may consist of lowecase Latin letters, digits, and dashes. To form a CSS class, add a short prefix for namespacing: `.block`. Spaces in long block names are replaced by dash. | Any DOM node can be a block if it accepts a class name. `<div class="block">...</div>` | Use class name selector only. [No tag name or ids](/faq/#why-not-use-ids-or-tagnames). No dependency on other blocks/elements on a page. `.block { color: #042; }` |
| Block names may consist of lowercase Latin letters, digits, and dashes. To form a CSS class, add a short prefix for namespacing: `.block`. Spaces in long block names are replaced by dash. | Any DOM node can be a block if it accepts a class name. `<div class="block">...</div>` | Use class name selector only. [No tag name or ids](/faq/#why-not-use-ids-or-tagnames). No dependency on other blocks/elements on a page. `.block { color: #042; }` |

## Element

Parts of a block and have no standalone meaning. Any element is semantically tied to its block.

| Naming | HTML | CSS |
| ------ | ---- | --- |
| Element names may consist of lowecase Latin letters, digits, dashes and underscores. CSS class is formed as block name plus two underscores plus element name: `.block__elem`. Spaces in long element names are replaced by dash. | Any DOM node within a block can be an element. Within a given block, all elements are semantically equal. | `<div class="block"><span class="block__elem"></span></div>` | Use class name selector only. [No tag name or ids](/faq/#why-not-use-ids-or-tagnames). No dependency on other blocks/elements on a page. |
| Element names may consist of lowercase Latin letters, digits, dashes and underscores. CSS class is formed as block name plus two underscores plus element name: `.block__elem`. Spaces in long element names are replaced by dash. | Any DOM node within a block can be an element. Within a given block, all elements are semantically equal. | `<div class="block"><span class="block__elem"></span></div>` | Use class name selector only. [No tag name or ids](/faq/#why-not-use-ids-or-tagnames). No dependency on other blocks/elements on a page. |

### Good

Expand All @@ -49,7 +49,7 @@ Flags on blocks or elements. Use them to change appearance, behavior or state.

| Naming | HTML | CSS |
| ------ | ---- | --- |
| Modifier names may consist of lowecase Latin letters, digits, dashes and underscores. CSS class is formed as block’s or element’s name plus two dashes: `.block--mod` or `.block__elem--mod` and `.block--color-black` with `.block--color-red`. Spaces in complicated modifiers are replaced by dash. | Modifier is an extra class name which you add to a block/element DOM node. Add modifier classes only to blocks/elements they modify, and keep the original class. | Use modifier class name as selector: `.block--hidden { }` To alter elements based on a block-level modifier: `.block--mod .block__elem { }` Element modifier: `.block__elem--mod { }` |
| Modifier names may consist of lowercase Latin letters, digits, dashes and underscores. CSS class is formed as block’s or element’s name plus two dashes: `.block--mod` or `.block__elem--mod` and `.block--color-black` with `.block--color-red`. Spaces in complicated modifiers are replaced by dash. | Modifier is an extra class name which you add to a block/element DOM node. Add modifier classes only to blocks/elements they modify, and keep the original class. | Use modifier class name as selector: `.block--hidden { }` To alter elements based on a block-level modifier: `.block--mod .block__elem { }` Element modifier: `.block__elem--mod { }` |

### Good

Expand Down