--- a/devtools/client/shared/widgets/cubic-bezier.css
+++ b/devtools/client/shared/widgets/cubic-bezier.css
@@ -10,48 +10,48 @@
   width: 510px;
   height: 370px;
   flex-direction: row-reverse;
   overflow: hidden;
   padding: 5px;
   box-sizing: border-box;
 }
 
-.display-wrap {
+.cubic-bezier-container .display-wrap {
   width: 50%;
   height: 100%;
   text-align: center;
   overflow: hidden;
 }
 
 /* Coordinate Plane */
 
-.coordinate-plane {
+.cubic-bezier-container .coordinate-plane {
   width: 150px;
   height: 370px;
   margin: 0 auto;
   position: relative;
 }
 
-.control-point {
+.cubic-bezier-container .control-point {
   position: absolute;
   z-index: 1;
   height: 10px;
   width: 10px;
   border: 0;
   background: #666;
   display: block;
   margin: -5px 0 0 -5px;
   outline: none;
   border-radius: 5px;
   padding: 0;
   cursor: pointer;
 }
 
-.display-wrap {
+.cubic-bezier-container .display-wrap {
   background:
   repeating-linear-gradient(0deg,
     transparent,
     var(--bezier-grid-color) 0,
     var(--bezier-grid-color) 1px,
     transparent 1px,
     transparent 15px) no-repeat,
   repeating-linear-gradient(90deg,
@@ -61,65 +61,65 @@
     transparent 1px,
     transparent 15px) no-repeat;
   background-size: 100% 100%, 100% 100%;
   background-position: -2px 5px, -2px 5px;
 
   -moz-user-select: none;
 }
 
-canvas.curve {
+.cubic-bezier-container canvas.curve {
   background:
     linear-gradient(-45deg,
       transparent 49.7%,
       var(--bezier-diagonal-color) 49.7%,
       var(--bezier-diagonal-color) 50.3%,
       transparent 50.3%) center no-repeat;
   background-size: 100% 100%;
   background-position: 0 0;
 }
 
 /* Timing Function Preview Widget */
 
-.timing-function-preview {
+.cubic-bezier-container .timing-function-preview {
   position: absolute;
   bottom: 20px;
   right: 45px;
   width: 150px;
 }
 
-.timing-function-preview .scale {
+.cubic-bezier-container .timing-function-preview .scale {
   position: absolute;
   top: 6px;
   left: 0;
   z-index: 1;
 
   width: 150px;
   height: 1px;
 
   background: #ccc;
 }
 
-.timing-function-preview .dot {
+.cubic-bezier-container .timing-function-preview .dot {
   position: absolute;
   top: 0;
   left: -7px;
   z-index: 2;
 
   width: 10px;
   height: 10px;
 
   border-radius: 50%;
   border: 2px solid white;
   background: #4C9ED9;
 }
 
 /* Preset Widget */
 
-.preset-pane {
+.cubic-bezier-container .preset-pane {
   width: 50%;
   height: 100%;
   border-right: 1px solid var(--theme-splitter-color);
   padding-right: 4px; /* Visual balance for the panel-arrowcontent border on the left */
 }
 
 #preset-categories {
   display: flex;
@@ -129,88 +129,89 @@ canvas.curve {
   background-color: var(--theme-toolbar-background);
   margin: 3px auto 0 auto;
 }
 
 #preset-categories .category:last-child {
   border-right: none;
 }
 
-.category {
+.cubic-bezier-container .category {
   padding: 5px 0px;
   width: 33.33%;
   text-align: center;
   text-transform: capitalize;
   border-right: 1px solid var(--theme-splitter-color);
   cursor: default;
   color: var(--theme-body-color);
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
-.category:hover {
+.cubic-bezier-container .category:hover {
   background-color: var(--theme-tab-toolbar-background);
 }
 
-.active-category {
+.cubic-bezier-container .active-category {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
-.active-category:hover {
+.cubic-bezier-container .active-category:hover {
   background-color: var(--theme-selection-background);
 }
 
 #preset-container {
   padding: 0px;
   width: 100%;
   height: 331px;
   overflow-y: auto;
 }
 
-.preset-list {
+.cubic-bezier-container .preset-list {
   display: none;
   padding-top: 6px;
 }
 
-.active-preset-list {
+.cubic-bezier-container .active-preset-list {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
 }
 
-.preset {
+.cubic-bezier-container .preset {
   cursor: pointer;
   width: 33.33%;
   margin: 5px 0px;
   text-align: center;
 }
 
-.preset canvas {
+.cubic-bezier-container .preset canvas {
   display: block;
   border: 1px solid var(--theme-splitter-color);
   border-radius: 3px;
   background-color: var(--theme-body-background);
   margin: 0 auto;
 }
 
-.preset p {
+.cubic-bezier-container .preset p {
   font-size: 80%;
   margin: 2px auto 0px auto;
   color: var(--theme-body-color-alt);
   text-transform: capitalize;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
-.active-preset p, .active-preset:hover p {
+.cubic-bezier-container .active-preset p,
+.cubic-bezier-container .active-preset:hover p {
   color: var(--theme-body-color);
 }
 
-.preset:hover canvas {
+.cubic-bezier-container .preset:hover canvas {
   border-color: var(--theme-selection-background);
 }
 
-.active-preset canvas,
-.active-preset:hover canvas {
+.cubic-bezier-container .active-preset canvas,
+.cubic-bezier-container .active-preset:hover canvas {
   background-color: var(--theme-selection-background-semitransparent);
   border-color: var(--theme-selection-background);
 }

--- a/devtools/client/shared/widgets/filter-widget.css
+++ b/devtools/client/shared/widgets/filter-widget.css
@@ -14,31 +14,31 @@
   /* when opened in a xul:panel, a gray color is applied to text */
   color: var(--theme-body-color);
 }
 
 #filter-container.dragging {
   -moz-user-select: none;
 }
 
-.filters-list,
-.presets-list {
+#filter-container .filters-list,
+#filter-container .presets-list {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
 }
 
-.filters-list {
+#filter-container .filters-list {
   /* Allow the filters list to take the full width when the presets list is
      hidden */
   flex-grow: 1;
   padding: 0 6px;
 }
 
-.presets-list {
+#filter-container .presets-list {
   /* Make sure that when the presets list is shown, it has a fixed width */
   width: 200px;
   padding-left: 6px;
   transition: width .1s;
   flex-shrink: 0;
   border-left: 1px solid var(--theme-splitter-color);
 }
 
@@ -50,189 +50,190 @@
 
 #filter-container.show-presets .filters-list {
   width: 300px;
 }
 
 /* The list of filters and list of presets should push their footers to the
    bottom, so they can take as much space as there is */
 
-#filters,
-#presets {
+#filter-container #filters,
+#filter-container #presets {
   flex-grow: 1;
   /* Avoid pushing below the tooltip's area */
   overflow-y: auto;
 }
 
 /* The filters and presets list both have footers displayed at the bottom.
    These footers have some input (taking up as much space as possible) and an
    add button next */
 
-.footer {
+#filter-container .footer {
   display: flex;
   margin: 10px 3px;
   align-items: center;
 }
 
-.footer :not(button) {
+#filter-container .footer :not(button) {
   flex-grow: 1;
   margin-right: 3px;
 }
 
 /* Styles for 1 filter function item */
 
-.filter,
-.filter-name,
-.filter-value {
+#filter-container .filter,
+#filter-container .filter-name,
+#filter-container .filter-value {
   display: flex;
   align-items: center;
 }
 
-.filter {
+#filter-container .filter {
   margin: 5px 0;
 }
 
-.filter-name {
+#filter-container .filter-name {
   width: 120px;
   margin-right: 10px;
 }
 
-.filter-name label {
+#filter-container .filter-name label {
   -moz-user-select: none;
   flex-grow: 1;
 }
 
-.filter-name label.devtools-draglabel {
+#filter-container .filter-name label.devtools-draglabel {
   cursor: ew-resize;
 }
 
 /* drag/drop handle */
 
-.filter-name i {
+#filter-container .filter-name i {
   width: 10px;
   height: 10px;
   margin-right: 10px;
   cursor: grab;
   background: linear-gradient(to bottom,
                               currentColor 0,
                               currentcolor 1px,
                               transparent 1px,
                               transparent 2px);
   background-repeat: repeat-y;
   background-size: auto 4px;
   background-position: 0 1px;
 }
 
-.filter-value {
+#filter-container .filter-value {
   min-width: 150px;
   margin-right: 10px;
   flex: 1;
 }
 
-.filter-value input {
+#filter-container .filter-value input {
   flex-grow: 1;
 }
 
 /* Fix the size of inputs */
 /* Especially needed on Linux where input are bigger */
-input {
+#filter-container input {
   width: 8em;
 }
 
-.preset {
+#filter-container .preset {
   display: flex;
   margin-bottom: 10px;
   cursor: pointer;
   padding: 3px 5px;
 
   flex-direction: row;
   flex-wrap: wrap;
 }
 
-.preset label,
-.preset span {
+#filter-container .preset label,
+#filter-container .preset span {
   display: flex;
   align-items: center;
 }
 
-.preset label {
+#filter-container .preset label {
   flex: 1 0;
   cursor: pointer;
   color: var(--theme-body-color);
 }
 
-.preset:hover {
+#filter-container .preset:hover {
   background: var(--theme-selection-background);
 }
 
-.preset:hover label, .preset:hover span {
+#filter-container .preset:hover label,
+#filter-container .preset:hover span {
   color: var(--theme-selection-color);
 }
 
-.preset .remove-button {
+#filter-container .preset .remove-button {
   order: 2;
 }
 
-.preset span {
+#filter-container .preset span {
   flex: 2 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
   order: 3;
   color: var(--theme-body-color-alt);
 }
 
-.remove-button {
+#filter-container .remove-button {
   width: 16px;
   height: 16px;
   background: url(chrome://devtools/skin/images/close.svg);
   background-size: cover;
   font-size: 0;
   border: none;
   cursor: pointer;
 }
 
-.hidden {
+#filter-container .hidden {
   display: none !important;
 }
 
 #filter-container .dragging {
   position: relative;
   z-index: 10;
   cursor: grab;
 }
 
 /* message shown when there's no filter specified */
 #filter-container p {
   text-align: center;
   line-height: 20px;
 }
 
-.add,
+#filter-container .add,
 #toggle-presets {
   background-size: cover;
   border: none;
   width: 16px;
   height: 16px;
   font-size: 0;
   vertical-align: middle;
   cursor: pointer;
   margin: 0 5px;
 }
 
-.add {
+#filter-container .add {
   background: url(chrome://devtools/skin/images/add.svg);
 }
 
 #toggle-presets {
   background: url(chrome://devtools/skin/images/pseudo-class.svg);
 }
 
-.add,
-.remove-button,
+#filter-container .add,
+#filter-container .remove-button,
 #toggle-presets {
   filter: var(--icon-filter);
 }
 
 .show-presets #toggle-presets {
   filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
 }

--- a/devtools/client/shared/widgets/mdn-docs.css
+++ b/devtools/client/shared/widgets/mdn-docs.css
@@ -23,17 +23,17 @@
   overflow: auto;
   transition: opacity 400ms ease-in;
 }
 
 .mdn-syntax {
   margin-top: 1em;
 }
 
-.devtools-throbber {
+.mdn-container .devtools-throbber {
   align-self: center;
   opacity: 0;
 }
 
 .mdn-visit-page {
   display: inline-block;
   padding: 1em 0;
 }