[ CodeStyle ] Add class conventions #22
Conversation
docs/style-guide.md
Outdated
| ### Class prefixes | ||
|
|
||
| In addition to the [global `oui-` namespace](#namespace), OUI uses class prefixes to provide | ||
| additional clarity to the job a given class plays. OUI uses the following class |
There was a problem hiding this comment.
do we want to say “plays a role“ or “has a job”?
There was a problem hiding this comment.
I played around with the wording a bit- is it clearer now?
| - **c** - for UI components, such as `.oui-c-button` | ||
| - **l** - for layout-specific component styles, such as `.oui-l-container` | ||
| - **u** - for utilities, such as `.oui-u-margin-bottom-none` | ||
| - **is** - for specific states, such as `.oui-is-active` |
There was a problem hiding this comment.
| - **is** - for specific states, such as `.oui-is-active` | |
| - **is** - for specific states, such as `.oui-is-active` | |
| All classes must use one of these categories. |
Should this be a requirement? I'm not thinking of exceptions- sections within a component would still have c, for instance .oui-c-card__header. We may need to add more prefixes in that case.
| In addition to the [`oui-` namespace](#namespace), OUI uses class prefixes to | ||
| provide context about the role a class plays within the design system. OUI uses | ||
| the following class prefix conventions: |
There was a problem hiding this comment.
While there is a definite technological and logical reason to use a prefix for class names, I'm not so sure about the Hungarian Notation on top of that. I'm wondering in what ways it's useful for beginners to have that distinction (that has to be learned first for c, l and u) and if experienced users even need it because they might already know the categorisation by the class name itself.
I could see some points from the disadvantages section on the Hungarian Notation also be brought up by future users, especially around redundancy, readability and deductibility. I'm not sure if it's clear all the time if something belongs to the layout or component category and I could see myself guessing wrong in the heat of the moment.
Are there, besides the added clarity, also technological or other types of benefits to this notation?
On the other hand, the is and has part of the story do make sense to me due to clearly enhanced readability and could also be extended to more verbs (.oui-makes-loopings or whatever).
3 participants
No description provided.