From ece117b33fb9d342e12b5090abc604ba908b13bc Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Fri, 21 Apr 2023 12:54:57 +0200 Subject: [PATCH] Improve CSS class naming style guide (#25173) --- code_style.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/code_style.md b/code_style.md index f2f7e54ce..59d17492b 100644 --- a/code_style.md +++ b/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: