[css-values-4][editorial] Add more examples of dashed-ident usage, and some guidance for preprocessors. Closes w3c#5438

Author: tabatkins

css-values-4/Overview.bs

@@ -591,7 +591,53 @@ Author-defined Identifiers: the <<custom-ident>> type</h3>
 		For example, [=custom properties=] need to be distinguishable from CSS-defined properties,
 		as new properties are added to CSS regularly.
 		To allow this,
-		[=custom property=] names are required to be <<dashed-ident>>s.
+		[=custom property=] names are required to be <<dashed-ident>>s,
+		as in this example:
+
+		<pre highlight=css>
+		.foo {
+			--fg-color: blue;
+		}
+		</pre>
+	</div>
+
+	<div class=example>
+		<<dashed-ident>>s are also used in the ''@color-profile'' rule,
+		to separate author-defined color profiles
+		from pre-defined ones like ''device-cmyk'',
+		and allow CSS to define more pre-defined (but overridable) profiles in the future
+		without fear of clashing with author-defined profiles:
+
+		<pre highlight=css>
+		@color-profile --foo { src: url(https://example.com/foo.icc); }
+		.foo {
+			color: color(--foo 1 0 .5 / .2);
+		}
+		</pre>
+	</div>
+
+	<div class=example>
+		CSS will use <<dashed-ident>> more in the future,
+		as more author-controlled syntax is added.
+		CSS authoring tools,
+		such as preprocessors that turn custom syntax into standard CSS,
+		<em>should</em> use <<dashed-ident>> as well,
+		to avoid clashing with future CSS design.
+
+		For example,
+		if a CSS preprocessor added a new "custom" at-rule,
+		it <em>shouldn't</em> spell it <css>@custom</css>,
+		as this would clash with a future official <css>@custom</css> rule added by CSS.
+		Instead, it should use <css>@--custom</css>,
+		which is guaranteed to never clash with anything defined by CSS.
+
+		Even better, it should use <css>@--library1-custom</css>,
+		so that if Library2 adds their own "custom" at-rule
+		(spelled @--library2-custom),
+		there's no possibility of clash.
+		Ideally this prefix should be customizable,
+		if allowed by the tooling,
+		so authors can manually avoid clashes on their own.
 	</div>