1 files changed, 36 insertions, 7 deletions
diff --git a/doc/development/fe_guide/style_guide_js.md b/doc/development/fe_guide/style_guide_js.md
index 02773162801..917d28b48ee 100644
--- a/doc/development/fe_guide/style_guide_js.md
+++ b/doc/development/fe_guide/style_guide_js.md
@@ -207,10 +207,39 @@ Do not use them anymore and feel free to remove them when refactoring legacy cod
     var c = pureFunction(values.foo);
   ```
 
-1. Avoid constructors with side-effects
+1. Avoid constructors with side-effects.
+Although we aim for code without side-effects we need some side-effects for our code to run.
+
+If the class won't do anything if we only instantiate it, it's ok to add side effects into the constructor (_Note:_ The following is just an example. If the only purpose of the class is to add an event listener and handle the callback a function will be more suitable.)
+
+```javascript
+// Bad
+export class Foo {
+  constructor() {
+    this.init();
+  }
+  init() {
+    document.addEventListener('click', this.handleCallback)
+  },
+  handleCallback() {
+
+  }
+}
+
+// Good
+export class Foo {
+  constructor() {
+    document.addEventListener()
+  }
+  handleCallback() {
+  }
+}
+```
+
+On the other hand, if a class only needs to extend a third party/add event listeners in some specific cases, they should be initialized oustside of the constructor.
 
 1. Prefer `.map`, `.reduce` or `.filter` over `.forEach`
-A forEach will cause side effects, it will be mutating the array being iterated. Prefer using `.map`,
+A forEach will most likely cause side effects, it will be mutating the array being iterated. Prefer using `.map`,
 `.reduce` or `.filter`
   ```javascript
     const users = [ { name: 'Foo' }, { name: 'Bar' } ];
@@ -302,20 +331,20 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
 
 #### Naming
 1. **Extensions**: Use `.vue` extension for Vue components.
-1. **Reference Naming**: Use camelCase for their instances:
+1. **Reference Naming**: Use PascalCase for their instances:
   ```javascript
     // bad
-    import CardBoard from 'cardBoard'
+    import cardBoard from 'cardBoard.vue'
 
     components: {
-      CardBoard:
+      cardBoard,
     };
 
     // good
-    import cardBoard from 'cardBoard'
+    import CardBoard from 'cardBoard.vue'
 
     components: {
-      cardBoard:
+      CardBoard,
     };
   ```