Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-23 00:28:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve CSS class naming style guide (#25173)

Browse Source
This commit is contained in:
Michael Weimann 2023-04-21 12:54:57 +02:00 committed by GitHub
parent 66c86a6397
commit ece117b33f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
code_style.md
View File

@ -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. 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\_". 1. Class names must be prefixed with "mx\_".
2. Class names should denote the component which defines them, followed by any context: 2. Class names must denote the component which defines them, followed by any context.
1. mx_MyFoo The context is not further specified here in terms of meaning or syntax.
2. mx_MyFoo_avatar Use whatever is appropriate for your implementation use case.
3. mx_MyFoo_avatar--user 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. 3. Use the `$font` and `$spacing` variables instead of manual values.
4. Keep indentation/nesting to a minimum. Maximum suggested nesting is 5 layers. 4. Keep indentation/nesting to a minimum. Maximum suggested nesting is 5 layers.
5. Use the whole class name instead of shortcuts: 5. Use the whole class name instead of shortcuts: