Page MenuHomePhabricator

Remove "is overqualified" rule from ace/csslint in CodeEditor extension
Open, MediumPublic

Description

According to https://www.mediawiki.org/wiki/Help:TemplateStyles#How_can_I_target_specific_skins? and https://www.mediawiki.org/wiki/Extension:TemplateStyles I've added "body" to .skin-minerva in https://it.wikivoyage.org/wiki/Template:Disambigua/styles.css but I got the following warning:

Warning: Element (body.skin-minerva) is overqualified, just use .skin-minerva without element name.

The strange thing is that if I change its content into:

body.skin-minerva .toccolours { 
	border: 1px solid #aaa;
	background-color: #f9f9f9;
	padding: 5px;
	font-size: 95%;
}
body.skin-minerva .toccolours { 
	border: 1px solid #aaa;
	background-color: #f9f9f9;
	padding: 5px;
	font-size: 95%;
}

the warning disappear.

So two things:

  1. warning behaviour should be fixed
  2. which is the correct recommendation: to add body or not?

Event Timeline

Krinkle subscribed.

The warning is displayed by the CodeEditor extension, and is trying to help you follow a certain coding style guide for how some people prefer to write the CSS code. It serves as (very minor) advice to optimise performance and stability.

It does not need to be followed, does not affect whether something works, and can be ignored just fine. You can save the page anyway, and it will work.

The documentation about TemplateStyles is correct. The only way it is possible for <templatestyles> to use skin- classes is by specifying <body>. This restriction is required for the safety of the website and applies only to TemplateStyles.

For CSS rules in gadgets, site styles, and user styles, this restriction does not apply. The warning was originally enabled as part of the style advice for those use cases, not for TemplateStyles.

So in short:

  • There is no problem in the software of TemplateStyles or Minerva. This works fine.
  • Using body.skin-minerva .toccolours in TemplateStyles also works fine, the documentation is correct. You can ignore the warning. It does not matter.

I will leave this task open as request for CodeEditor. To perhaps consider removing this style advice because it is indeed confusing in the context of TemplateStyles. And also more generally it does not seem to have much value for on-wiki code. The rule originates from the guide used for CSS code developed by the Foundation, which requires different standards.

Krinkle renamed this task from body.skin-minerva overqualified to Remove "is overqualified" stylelint rule from CodeEditor extension.Jun 7 2020, 2:17 AM
Krinkle triaged this task as Medium priority.
Krinkle added a project: Editing-team.
Krinkle unsubscribed.
Krinkle renamed this task from Remove "is overqualified" stylelint rule from CodeEditor extension to Remove "is overqualified" rule from ace/csslint in CodeEditor extension.Jun 7 2020, 2:20 AM
Izno subscribed.

I think generally the rule has utility (please don't use overqualified selectors, for the same reasons the lint was originally added), so I don't think the generalization of the task to removing "is overqualified" is reasonable.

It would make more sense for there to be a ruleset for wiki (gadget/skin) and/or TemplateStyles CSS. This has come up in a few other tasks.

Such a ruleset might also be useful to guide editors to use widely-supported selectors/rules. caniuseit is great, but is it okay for the system not to warn that flex is only supported for 95% of users (+- Wikimedia numbers)? (Or other less-supported CSS.) (I understand that's a separate task to add such a rule.)

Maybe there can be a filter on this.sender.emit("annotate") ?? not sure. otherwise all of this is inside private variables and not easy to modify. ACE is considerably not flexible in this area.