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 #302
I feel like I should mention that I read through
#94 but there wasn't a
strong consensus either way

Apologies for the double PR, I misspelled the branch name

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;
 

src/pages/naming.mdx

@@ -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 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
 
 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 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