Improve CSS class naming style guide (#25173)

pull/25175/head
Michael Weimann 2023-04-21 12:54:57 +02:00 提交者 GitHub
父节点 66c86a6397
当前提交 ece117b33f
找不到此签名对应的密钥
GPG 密钥 ID: 4AEE18F83AFDEB23
共有 1 个文件被更改,包括 8 次插入4 次删除

查看文件

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