Browse Source

Improve CSS class naming style guide (#25173)

Michael Weimann 2 years ago
parent
commit
ece117b33f
1 changed files with 8 additions and 4 deletions
  1. 8 4
      code_style.md

+ 8 - 4
code_style.md

@@ -281,10 +281,14 @@ Inheriting all the rules of TypeScript, the following additionally apply:
 Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, but actually it is not.
 
 1. Class names must be prefixed with "mx\_".
-2. Class names should denote the component which defines them, followed by any context:
-    1. mx_MyFoo
-    2. mx_MyFoo_avatar
-    3. mx_MyFoo_avatar--user
+2. Class names must denote the component which defines them, followed by any context.
+   The context is not further specified here in terms of meaning or syntax.
+   Use whatever is appropriate for your implementation use case.
+   Some examples:
+    1. `mx_MyFoo`
+    2. `mx_MyFoo_avatar`
+    3. `mx_MyFoo_avatarUser`
+    4. `mx_MyFoo_avatar--user`
 3. Use the `$font` and `$spacing` variables instead of manual values.
 4. Keep indentation/nesting to a minimum. Maximum suggested nesting is 5 layers.
 5. Use the whole class name instead of shortcuts: