1557699 - Improve specificity in CSS

Status: RESOLVED FIXED

(DevTools :: Application Panel, enhancement)

Description

[Ola Gasidlo [:ogasidlo] [:ola] OOO - please ping :ladybenko:]

Improve specificity in CSS by replacing tags as selectors with classes.

App.css

Comment 1

[Belén [:ladybenko]]

Let's keep in mind that some styles might make sense to have them global (for instance, colors for all links in the panel). This could also be a good bug to clean up some styling we were doing wrong. Some suggestions:

In App.css:

• h1 this should have its own class selector
• a it seems reasonable to provide global styles (i.e. not use a specific selector) for things like color, not underlining, etc.
• Lets move the margin rule to the place that actually needs it (probably the WorkerListEmpty component).

All over CSS files:

• This is a good opportunity to create a --base-unit: 4px var and use measurements in terms of multiples of this, like we did with remote debugging.
• The same for font-sizes, colors, etc. Let's use css vars for it. Note that they might already exist in the common CSS files that are already being loaded for panels.

Comment 2

[Ola Gasidlo [:ogasidlo] [:ola] OOO - please ping :ladybenko:]

Attachment: Bug 1557699 - Improve CSS base, r=ladybenko!

Added variables in base.css, reduced specificity

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/70a9b57659f3
Improve CSS base, r=ladybenko

Comment 4

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/70a9b57659f3