From 8854a3b86a5783639408f0d49ab50349bc1553b1 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Thu, 16 Jan 2025 20:39:41 +0800
Subject: [PATCH] devnotes: add section for managing css

---
 docs/devnotes.md | 49 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/docs/devnotes.md b/docs/devnotes.md
index 577c968..fc2d7ad 100644
--- a/docs/devnotes.md
+++ b/docs/devnotes.md
@@ -84,3 +84,52 @@ But, sometimes you need a redesigned (sometimes better) tool for the generic usa
   - *What* this new tool does?
   - *How* this tool works?
 - Clean up code regularly. Don't keep the unused code forever.
+
+## Managing CSS
+
+Two techniques are still:
+
+- Styled compoenent (solid-styled)
+- Native CSS with CSS layering
+
+The second is recommended for massive use. A stylesheet for a component can be placed alongside
+the component's file. The stylesheet must use the same name as the component's file name, but replace the extension with
+`.css`. Say there is a component file "PreviewCard.tsx", the corresponding stylesheet is "PreviewCard.css". They are imported
+by the component file, so the side effect will be applied by the bundler.
+
+The speicifc component uses a root class to scope the rulesets' scope. This convention allows the component's style can be influenced
+by the other stylesheets. It works because Tutu is an end-user application, we gain the control of all stylesheets in the app (kind of).
+
+Styled component is still existing for its own good: decalrable and scoped by randomized names.
+Though styled component, using attributes for scoping, may not be as performant as the techniques with CSS class names;
+It's still provided in the Tutu's code infrastructure for its ease (it even provides a bridge to use js variable in css!).
+
+The following is an example of the recommended usage of solid-styled:
+
+```tsx
+// An example of using solid-styled
+import { css } from "solid-styled";
+import { createSignal } from "solid-js";
+
+const Component = () => {
+  const [width, setWidth] = createSignal(100);
+
+  css`
+  .root {
+    width: ${width()}%;
+  }
+  `
+  return <div class="root"></div>
+};
+```
+
+Native CSS is always recommended. When developing new component, you can use styled component first, and migrate
+to native css slowly.
+
+Before v2.0.0, there are CSS modules in use, but they are removed:
+
+- Duplicated loads
+- Unaware of order (failed composing)
+- Not-ready for hot reload
+
+In short, CSS module does not works well if the stylesheet will be accessed from more than one component.