docs: Use CSS selectors with caution.

Author: hqer927

README.md

@@ -120,6 +120,37 @@ context.emitter.on("destroy", () => {
 });
 ```
 
+### Use CSS selectors with caution. 
+
+In netless-app, any custom CSS you add will eventually be mounted into the global page context. If you use overly broad selectors (e.g., div, html, *, etc.), you will likely cause style pollution that affects other unrelated elements on the page.
+
+To avoid this problem, follow these principles:
+
+#### Avoid global wildcard or tag selectors
+Do not directly define styles using selectors like div, span, ul, html, body, or *. Doing so will override all matching elements across the entire page.
+
+#### Use named scoping (recommended)
+Define a unique root class name for your component or application (e.g., .my-whiteboard-extension) and nest all your styles under that class. This ensures that styles only apply to the area you intend.
+
+```css
+/* Good */
+.my-whiteboard-extension .toolbar {
+  background: #f5f5f5;
+}
+
+/* Bad */
+.toolbar {
+  background: #f5f5f5;
+}
+```
+#### Prefer CSS Modules or CSS-in-JS
+If your project supports them, consider using CSS Modules, styled‑components, or similar solutions. They automatically generate locally scoped class names, fundamentally avoiding conflicts.
+
+#### For dynamically inserted styles, use Shadow DOM or scoping utilities
+If you cannot avoid global styles, leverage @scope (experimental in modern browsers), the scoped attribute (deprecated), or a third‑party scoping library to limit the impact.
+
+Following these guidelines will help you present your custom styles correctly while maintaining style stability across the entire page.
+
 ## License
 
 The MIT license.