Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Keep user-facing text in markup, not in CSS content properties
Put visible labels and text in the template/JSX so it is searchable, translatable, and accessible, rather than injecting it via the CSS content property.
Bad example
| 1 | .adLabel > div::before { |
| 2 | content: 'Annonse:'; |
| 3 | } |
Explanation (EN)
A meaningful label hidden inside CSS is harder to translate and associate with its control.
Objašnjenje (HR)
Good example
| 1 | <span className={styles.adLabel}>Annonse:</span> |
Explanation (EN)
Objašnjenje (HR)
Notes (EN)
Put meaningful user-facing labels in localized markup so their content and accessible relationship can be inspected independently of styling.
Exceptions / Tradeoffs (EN)
Decorative pseudo-element content and intentionally generated counters can remain in CSS. Generated content is not universally invisible to assistive technology, but meaningful labels should not depend on inconsistent exposure.