Add rule about code length

website/docs/8-Resources/developer-guidelines.md

@@ -61,19 +61,6 @@ following practical guidelines.
   for root components of a directory, use index.jsx as the filename and use the
   directory name as the component name.
 - Use camelCase for prop names, or PascalCase if the prop value is a React component.
-- Imports should be sorted in the following order:
-
-1. Base libraries (react, semantic-ui, redux, other major third-party
-   dependencies)
-2. Dependencies from Volto
-2. Dependencies from other EEA addons
-3. Dependencies from current package, referenced by absolute path name
-   (namespace)
-4. Relative dependencies
-5. Static resources
-6. Volto configuration registry
-5. Side-effect imports (such as importing a css or less file)
-
 - Variables should precisely reflect their value and intended use. For example,
   `activeMenu` does not reflect the type of value: is it the active menu name
   or "[menu is active][6]"?
@@ -110,6 +97,23 @@ import someImage from '@eeacms/volto-eea-design-system/../theme/assets/someFile.
   [subcomponents][subs]. See the
   SemanticUI Card or Modal as example. The Footer could be implemented as
   `Footer` as wrapper component, `Footer.Section` etc.
+- Provide an abstraction level in your components that favours short JSX code
+  passages and high level structures. A single component that renders more then
+  50 lines of JSX code has a smell and should be considered to be refactored.
+  Code that is not fully visible in a single screen is hard to be read,
+  understood and maintained in the future.
+- Imports should be sorted in the following order:
+
+1. Base libraries (react, semantic-ui, redux, other major third-party
+   dependencies)
+2. Dependencies from Volto
+2. Dependencies from other EEA addons
+3. Dependencies from current package, referenced by absolute path name
+   (namespace)
+4. Relative dependencies
+5. Static resources
+6. Volto configuration registry
+5. Side-effect imports (such as importing a css or less file)
 
 ## Storybook