From 04656bf16f0525e877134a78341000b48a907c0b Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Wed, 24 May 2023 12:48:05 -0500
Subject: [PATCH] docs: Provide an example of dynamic styling.

---
 docs/subsystems/html-css.md | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/docs/subsystems/html-css.md b/docs/subsystems/html-css.md
index 99546824fd..e5dfd484d0 100644
--- a/docs/subsystems/html-css.md
+++ b/docs/subsystems/html-css.md
@@ -45,8 +45,20 @@ to avoid such a fate. So please make an effort to reuse existing
 styling, clean up now-unused CSS, etc., to keep things maintainable.
 
 Opt to write CSS in CSS files. Avoid using the `style=` attribute in
-HTML unless the styling is actually dynamic. Instead, define logical
-classes and put your styles in external CSS files such as `zulip.css`.
+HTML except for styles that are set dynamically. For example, we set
+the colors for specific streams (`{{stream_color}}`) on different
+elements dynamically, in files like `user_stream_list_item.hbs`:
+
+```html
+<span
+  class="stream-privacy-original-color-{{stream_id}} stream-privacy filter-icon"
+  style="color: {{stream_color}}">
+```
+
+But for most other cases, its preferable to define logical classes and
+put your styles in external CSS files such as `zulip.css` or a more
+specific CSS file, if one exists. See the contents of the `web/styles/`
+directory.
 
 ### Be consistent with existing similar UI