[css-variables] Example 5 might not represent best practices
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
(See Example 5)
https://www.w3.org/TR/css-variables-1/#defining-variables
A real-world example of custom property usage is easily separating out strings from where they’re used, to aid in maintenance of internationalization:
:root,
:root:lang(en) {--external-link: "external link";}
:root:lang(de) {--external-link: "externer Link";}
a[href^="http"]::after {content: " (" var(--external-link) ")"}
The variable declarations can even be kept in a separate file, to make maintaining the translations simpler.
This is perhaps questionable advice? On the one hand, if one has static strings in one's style sheet, using a variable and the :lang selector might be useful as a way of localizing the strings without repetition. On the other hand, there is some complexity to language matching here and it's probably not a best practice to have strings embedded in this way anyway. Our (I18N's) comment here might be "we wish you'd picked another example"
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with Example 5 in the linked CSS Variables specification, especially the custom-property and :lang usage. Review the language-matching and internationalization concerns raised in the issue. Done means the example guidance has been resolved and the specification text reflects the agreed decision.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- documentation, internationalization
- Issue type
- Documentation
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100