From 82ad59f8dc7ad748543958149a3211dc6c0975a5 Mon Sep 17 00:00:00 2001
From: JamesManningR <56916766+JamesManningR@users.noreply.github.com>
Date: Wed, 8 Nov 2023 12:06:33 +0000
Subject: [PATCH] Enforced casing and fix inconsistent homepage example (#310)

Made a decision about how names should look.
Block and elements have no casing guidance so the convention becomes
more subjective.

Fixes https://github.com/getbem/getbem.github.io/issues/302
I feel like I should mention that I read through
https://github.com/getbem/getbem.github.io/issues/94 but there wasn't a
strong consensus either way

Apologies for the double PR, I misspelled the branch name
---
 src/components/CodeSection.astro | 2 +-
 src/pages/naming.mdx             | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/CodeSection.astro b/src/components/CodeSection.astro
index 1925f0b..1690bb9 100644
--- a/src/components/CodeSection.astro
+++ b/src/components/CodeSection.astro
@@ -24,7 +24,7 @@ import { Code } from 'astro/components';
     </div>
     <div class="relative">
         <div class="bg-white text-black absolute right-2 top-2 font-bold py-0 px-2 rounded-md "><span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-teal-400">BEM</span></div>
-        <Code lang="scss" theme="dracula-soft" code={`.opinions_box {
+        <Code lang="scss" theme="dracula-soft" code={`.opinions-box {
     margin: 0 0 8px 0;
     text-align: center;
 
diff --git a/src/pages/naming.mdx b/src/pages/naming.mdx
index d8e9bd8..c30bc62 100644
--- a/src/pages/naming.mdx
+++ b/src/pages/naming.mdx
@@ -20,7 +20,7 @@ Encapsulates a standalone entity that is meaningful on its own. While blocks can
 
 | Naming | HTML | CSS |
 | ------ | ---- | --- |
-| Block names may consist of Latin letters, digits, and dashes. To form a CSS class, add a short prefix for namespacing: `.block` | 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 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; }` |
 
 ## Element
 
@@ -28,7 +28,7 @@ Parts of a block and have no standalone meaning. Any element is semantically tie
 
 | Naming | HTML | CSS |
 | ------ | ---- | --- |
-| Element names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as block name plus two underscores plus element name: `.block__elem` | 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 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. |
 
 ### Good
 
@@ -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 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 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 { }` |
 
 ### Good