Clarify CSS naming scheme on combined components
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Volker_E
	Jul 29 2020, 11:26 PM

Description

We're currently using --has-control and are on the brink to introduce another similar --has-button CSS class.
I guess those are inspired by SMACSS state is-* classes.

We should clarify when those classes are to be used and how to make a consistent naming scheme around combined components.

Details

	Subject	Repo	Branch	Lines +/-
	Update Codex from v0.1.1 to v0.2.1	mediawiki/core	master	+231 -233
	styles, docs: Use and document solely `--has-` and `--is-` prefixes	design/codex	main	+5 -3

Customize query in gerrit

Related Objects

Mentioned In: T286951: Decide on CSS Architecture for shared component library
T253671: [SPIKE] What's going on with BEM in Vector?

Event Timeline

Volker_E created this task.Jul 29 2020, 11:26 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 29 2020, 11:26 PM

Volker_E edited subscribers, added: • Niedzielski; removed: • Sniedzielski.Jul 29 2020, 11:27 PM

I don't have strong opinions on this but would find value in its resolution. I'm happy to follow the convention @Volker_E and @Jdrewniak define if it is well documented.

Is this mainly a question of vocabulary? I think the usage itself is consistent with the BEM concept of modifiers.

The example in wvui-input puts modifier classes on a wrapper element, and each modifier can be used separately or combined ( any of --has-button || --has-icon || --has-button --has-icon ).

I think this is a pretty reasonable approach.The alternative would be a separate modifier class that has both: --has-button-and-icon but that isn't as flexible. I support the one class per modification style. If two modifier classes collide, you could add a style the selects both for some special case:
.--has-button.--has-icon {...}

In terms of the vocabulary itself, the options are has is but also with! (I'm fine with has).

The approach here differs slightly from the SMACSS state classes because it allows multiple modifiers, whereas you really shouldn't have more than one state class at once.

cjming mentioned this in T253671: [SPIKE] What's going on with BEM in Vector?.Aug 4 2021, 9:53 PM

AnneT mentioned this in T286951: Decide on CSS Architecture for shared component library.Aug 6 2021, 5:45 PM

Volker_E added a project: Codex.May 11 2022, 9:19 PM

Volker_E edited subscribers, added: AnneT, SimoneThisDot, Catrope; removed: • Niedzielski, Anribolon.

I think this is as prevalent in Codex as it has been in WVUI.
We currently feature --has (start/end icon, start/end gradient, end button for input) as well as (-)-with (TypeaheadSearch thumbnail, SearchInput button).
Let's unify and document. I'm in favor of has.

Volker_E removed a project: WVUI.Sep 9 2022, 9:03 PM

Volker_E added a project: CSS.Sep 9 2022, 9:40 PM

Change 831156 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] styles, docs: Use and document solely `--has-` and `--is-` prefixes

https://gerrit.wikimedia.org/r/831156

gerritbot added a project: Patch-For-Review.Sep 9 2022, 10:22 PM

Change 831156 merged by jenkins-bot:

[design/codex@main] styles, docs: Use and document solely `--has-` and `--is-` prefixes

https://gerrit.wikimedia.org/r/831156

Volker_E closed this task as Resolved.Sep 12 2022, 5:33 PM

Volker_E claimed this task.

Volker_E updated the task description. (Show Details)