Use clean code taxonomy for rule EC26

ecocode-rules-specifications/src/main/rules/EC26/EC26.json

@@ -1,6 +1,12 @@
 {
   "title": "Prefer shorthand CSS notations to reduce stylesheets size",
   "type": "CODE_SMELL",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "LOW"
+    },
+    "attribute": "EFFICIENT"
+  },
   "status": "ready",
   "remediation": {
     "func": "Constant\/Issue",

ecocode-rules-specifications/src/main/rules/EC26/javascript/EC26.asciidoc

@@ -1,51 +1,45 @@
-This rule aims to encourage the use of shorthand CSS notations to reduce stylesheets size.
+:!sectids:
 
-== Examples
+== Why is this an issue?
 
-Examples of **non-compliant** code for this rule:
+By employing a shorthand property, you can create stylesheets that are more succinct and frequently easier to read, ultimately conserving time and energy.
+By reducing the number of CSS properties, you help to reduce the weight of your application bundle, and therefore its environmental footprint.
 
-[source,js]
+For example, the `font` shorthand consolidates various font-related properties, and the `margin` shorthand streamlines the definition of margins around a box.
+
+[source,typescriptjsx,data-diff-id="1",data-diff-type="noncompliant"]
 ----
-<div
-  style={{
-    marginTop: "1em",
-    marginRight: 0,
-    marginBottom: "2em",
-    marginLeft: "0.5em"
-  }}
->
-  {/* Your content here */}
+<div style={{ marginTop: "1em", marginRight: 0, marginBottom: "2em", marginLeft: "0.5em" }}>
+    {/* Noncompliant: these properties can be grouped together in the "margin" property */}
 </div>
 ----
 
-[source,js]
+[source,typescriptjsx,data-diff-id="1",data-diff-type="compliant"]
 ----
-<div
-  style={{
-    transitionProperty: "width",
-    transitionDuration: "35s",
-    transitionTimingFunction: "ease-in-out",
-    transitionDelay: "0s"
-  }}
->
-  {/* Your content here */}
+<div style={{ margin: "1em 0 2em 0.5em" }}>
+    {/* Compliant usage of shorthand property */}
 </div>
 ----
 
-Examples of **compliant** code for this rule:
-
-[source,js]
-----
-<div style={{ margin: "1em 0 2em 0.5em" }}>{/* Your content here */}</div>
-----
+This optimization can't always be done, depending on the properties you're using.
+For example, if you only want to set the left margin, you must continue to use `margin-left`.
 
-[source,js]
+[source,typescriptjsx,data-diff-id="1",data-diff-type="compliant"]
 ----
-<div style={{ transition: "width 35s ease-in-out 0s" }}>
-  {/* Your content here */}
+<div style={{ marginLeft: "1em" }}>
+    {/* Compliant because we only want a left margin */}
 </div>
 ----
 
-== Further reading
+This optimization works for a number of properties https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#see_also[listed here].
+
+== Resources
+
+=== Documentation
+
+- https://github.com/cnumr/best-practices/blob/fc5a1f865bafb196e4775cce8835393751d40ed8/chapters/BP_026_en.md[CNUMR best practices] - Use abbreviated CSS notations
+- https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties[Mozilla Web Technology for Developers] - Shorthand properties
+
+=== Articles & blog posts
 
-This recommendation is made by the CNUMR: https://github.com/cnumr/best-practices/blob/fc5a1f865bafb196e4775cce8835393751d40ed8/chapters/BP_026_en.md[Use abbreviated CSS notations]
+- https://dev.to/cscarpitta/6-css-shorthand-properties-to-improve-your-web-application-2dbj[6 CSS Shorthand properties to improve your web application]