From e7be610d5773e69abbfb98d19e23112dfad6dfcc Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 21 Feb 2023 14:13:37 +0800 Subject: [PATCH] Improve frontend guidelines (#23007) Some were out-dated, some are added. --- .../developers/guidelines-frontend.en-us.md | 18 +++++++--- web_src/js/features/aria.md | 33 +++++++++++++++++-- 2 files changed, 43 insertions(+), 8 deletions(-) diff --git a/docs/content/doc/developers/guidelines-frontend.en-us.md b/docs/content/doc/developers/guidelines-frontend.en-us.md index 23be6c677..7f4d87d90 100644 --- a/docs/content/doc/developers/guidelines-frontend.en-us.md +++ b/docs/content/doc/developers/guidelines-frontend.en-us.md @@ -39,12 +39,20 @@ We recommend [Google HTML/CSS Style Guide](https://google.github.io/styleguide/h ### Gitea specific guidelines: 1. Every feature (Fomantic-UI/jQuery module) should be put in separate files/directories. -2. HTML ids and classes should use kebab-case. +2. HTML ids and classes should use kebab-case, it's preferred to contain 2-3 feature related keywords. 3. HTML ids and classes used in JavaScript should be unique for the whole project, and should contain 2-3 feature related keywords. We recommend to use the `js-` prefix for classes that are only used in JavaScript. -4. jQuery events across different features could use their own namespaces if there are potential conflicts. -5. CSS styling for classes provided by frameworks should not be overwritten. Always use new class-names with 2-3 feature related keywords to overwrite framework styles. -6. The backend can pass complex data to the frontend by using `ctx.PageData["myModuleData"] = map[]{}` -7. Simple pages and SEO-related pages use Go HTML Template render to generate static Fomantic-UI HTML output. Complex pages can use Vue3. +4. CSS styling for classes provided by frameworks should not be overwritten. Always use new class names with 2-3 feature related keywords to overwrite framework styles. Gitea's helper CSS classes in `helpers.less` could be helpful. +5. The backend can pass complex data to the frontend by using `ctx.PageData["myModuleData"] = map[]{}`, but do not expose whole models to the frontend to avoid leaking sensitive data. +6. Simple pages and SEO-related pages use Go HTML Template render to generate static Fomantic-UI HTML output. Complex pages can use Vue3. +7. Clarify variable types, prefer `elem.disabled = true` instead of `elem.setAttribute('disabled', 'anything')`, prefer `$el.prop('checked', var === 'yes')` instead of `$el.prop('checked', var)`. +8. Use semantic elements, prefer `