From f0edb0c786b32dab76baddcc0a2725942c74301c Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Sat, 9 Nov 2024 17:26:17 +0100
Subject: [PATCH] feat(developer): Add BEM to CSS documentation

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 .../getting_started/codingguidelines.rst      | 46 +++++++++++++++++--
 1 file changed, 41 insertions(+), 5 deletions(-)

diff --git a/developer_manual/getting_started/codingguidelines.rst b/developer_manual/getting_started/codingguidelines.rst
index b453463a0..a95d5b509 100644
--- a/developer_manual/getting_started/codingguidelines.rst
+++ b/developer_manual/getting_started/codingguidelines.rst
@@ -444,9 +444,10 @@ Control structures
 CSS
 ---
 
-Take a look at the `Writing Tactical CSS & HTML <https://www.youtube.com/watch?v=hou2wJCh3XE&feature=plcp>`_ video on YouTube.
-
-Don't bind your CSS too much to your HTML structure and try to avoid IDs. Also try to make your CSS reusable by grouping common attributes into classes.
+- Do not bind your CSS to much to your HTML structure.
+- Try to avoid IDs.
+- Try to make your CSS reusable by grouping common attributes into classes.
+- Take a look at the `Writing Tactical CSS & HTML <https://www.youtube.com/watch?v=hou2wJCh3XE&feature=plcp>`_ video on YouTube.
 
 **DO**:
 
@@ -456,7 +457,7 @@ Don't bind your CSS too much to your HTML structure and try to avoid IDs. Also t
       list-style-type: none;
   }
 
-  .list > .list_item {
+  .list > .list__item {
       display: inline-block;
   }
 
@@ -477,4 +478,39 @@ Don't bind your CSS too much to your HTML structure and try to avoid IDs. Also t
       display: inline-block;
   }
 
-**TBD**
+Naming convention
+^^^^^^^^^^^^^^^^^
+
+We recommend to use the BEM (Block-Element-Modifier) naming convention for CSS classes.
+BEM helps with making CSS reusable and better maintainable, especially when using pre-processors like SASS.
+
+**DO**:
+
+.. code-block:: css
+
+  .button {
+      background-color: var(--color-main-background);
+  }
+
+  .button--primary {
+      background-color: var(--color-primary);
+  }
+
+  .button__icon {
+      width: 20px;
+  }
+
+**DON'T**:
+
+.. code-block:: css
+
+  button.btn {
+      background-color: var(--color-main-background);
+  }
+
+  button.btn.primary {
+      background-color: var(--color-primary);
+  }
+  button.btn span.myIcon {
+      width: 20px;
+  }