Write styles only in stylesheets

How to do it

When a script must pass a value to CSS, set a custom property with style.setProperty('--progress', value) or a state attribute. The stylesheet decides what the value does. This keeps every style in one searchable place and lets a strict Content Security Policy block inline styles. The page-level gate is in Fail the build on broken rules.

Examples

Using these examples: they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

JavaScript example

// Avoid: the script decides how it looks
bar.style.width = `${percent}%`;

// Do: the script passes a value, the stylesheet uses it
bar.style.setProperty('--progress', `${percent}%`);

Python example

# A source check: scripts may only set custom properties
import pathlib, re, sys
pattern = re.compile(r"\.style\.(?!setProperty\(\s*['\"]--)")
hits = [f"{p}:{n}" for p in pathlib.Path("src").rglob("*.js")
        for n, line in enumerate(p.read_text().splitlines(), 1) if pattern.search(line)]
print("\n".join(f"FAIL {hit} sets a style directly" for hit in hits))
sys.exit(1 if hits else 0)

CSS example

.order-progress-bar { inline-size: var(--progress, 0%); }

How to check

The built HTML has 0 style= attributes and 0 <style> elements. A search of the scripts finds 0 assignments to .style. other than setProperty('--…').

Sources

• HTML Standard on the style attribute
• CSP Level 3 style-src

Related rules

• Fail the build on broken rules in Engineering