diff --git a/css/80_app.css b/css/80_app.css
index 8b723d9dd..1a637adf9 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -443,14 +443,14 @@ button[disabled].action:hover {
 
 /* Toolbar / Persistent UI Elements
 ------------------------------------------------------- */
-#bar-wrap {
+.top-toolbar-wrap {
     position: absolute;
     left: 0;
     top: 0;
     right: 0;
     z-index: 101;
 }
-#bar {
+.top-toolbar {
     display: flex;
     flex-flow: row nowrap;
     justify-content: space-between;
@@ -464,16 +464,16 @@ button[disabled].action:hover {
     scrollbar-width: none; /* Firefox */
     -ms-overflow-style: none; /* IE, Edge */
 }
-#bar::-webkit-scrollbar {
+.top-toolbar::-webkit-scrollbar {
     display: none; /* Chrome, Safari, Opera */
 }
-#bar .toolbar-item {
+.top-toolbar .toolbar-item {
     display: flex;
     flex: 0 1 auto;
     flex-flow: column wrap;
     justify-content: center;
 }
-#bar .toolbar-item .item-content {
+.top-toolbar .toolbar-item .item-content {
     display: flex;
     flex: 0 1 auto;
     flex-flow: row nowrap;
@@ -482,31 +482,31 @@ button[disabled].action:hover {
     width: auto;
     margin: 0 5px;
 }
-[dir='ltr'] #bar .toolbar-item:last-child .item-content,
-[dir='rtl'] #bar .toolbar-item:first-child .item-content {
+[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-content,
+[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-content {
     margin-right: 10px;
 }
-[dir='ltr'] #bar .toolbar-item:first-child .item-content,
-[dir='rtl'] #bar .toolbar-item:last-child .item-content {
+[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-content,
+[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-content {
     margin-left: 10px;
 }
-#bar .toolbar-item .item-label {
+.top-toolbar .toolbar-item .item-label {
     text-align: center;
     font-size: 11px;
     white-space: nowrap;
     margin: 1px 2px 2px 2px;
 }
-#bar .toolbar-item.spacer {
+.top-toolbar .toolbar-item.spacer {
     width: 100%;
     flex-grow: 2;
 }
-#bar .toolbar-item:first-child {
+.top-toolbar .toolbar-item:first-child {
     justify-content: flex-start;
 }
-#bar .toolbar-item:last-child {
+.top-toolbar .toolbar-item:last-child {
     justify-content: flex-end;
 }
-#bar .toolbar-item:empty:not(.spacer) {
+.top-toolbar .toolbar-item:empty:not(.spacer) {
     display: none;
 }
 button.bar-button {
@@ -587,11 +587,11 @@ button.add-note svg.icon {
 }
 
 
-#bar.narrow .spinner,
-#bar.narrow button.bar-button .label {
+.top-toolbar.narrow .spinner,
+.top-toolbar.narrow button.bar-button .label {
     display: none;
 }
-#bar.narrow button .count {
+.top-toolbar.narrow button .count {
     border-left-width: 0;
     border-right-width: 0;
 }
@@ -738,7 +738,7 @@ a.hide-toggle {
 
 /* Sidebar / Inspector
 ------------------------------------------------------- */
-#sidebar {
+.sidebar {
     position: relative;
     float: left;
     height: 100%;
@@ -748,13 +748,13 @@ a.hide-toggle {
     border: 0px solid #ccc;
     border-right-width: 1px;
 }
-[dir='rtl'] #sidebar {
+[dir='rtl'] .sidebar {
     float: right;
     border-right-width: 0px;
     border-left-width: 1px;
 }
 
-#sidebar-resizer {
+.sidebar-resizer {
     position: absolute;
     top: 0;
     right: -6px;
@@ -762,17 +762,17 @@ a.hide-toggle {
     width: 6px;
     cursor: col-resize;
 }
-[dir='rtl'] #sidebar-resizer {
+[dir='rtl'] .sidebar-resizer {
     right: auto;
     left: -6px;
 }
 
-#sidebar.collapsed #sidebar-resizer {
+.sidebar.collapsed .sidebar-resizer {
     /* make target wider to avoid the user accidentally resizing window */
     width: 10px;
     right: -10px;
 }
-[dir='rtl'] #sidebar.collapsed #sidebar-resizer {
+[dir='rtl'] .sidebar.collapsed .sidebar-resizer {
     left: -10px;
 }
 
@@ -849,19 +849,19 @@ a.hide-toggle {
     margin-bottom: 150px;
 }
 
-#sidebar .search-header .icon {
+.sidebar .search-header .icon {
     display: block;
     position: absolute;
     left: 10px;
     top: 80px;
     pointer-events: none;
 }
-[dir='rtl'] #sidebar .search-header .icon {
+[dir='rtl'] .sidebar .search-header .icon {
     left: auto;
     right: 10px;
 }
 
-#sidebar .search-header input {
+.sidebar .search-header input {
     position: absolute;
     top: 60px;
     height: 60px;
@@ -4215,7 +4215,7 @@ img.tile-debug {
     margin: 0 3px;
 }
 
-#footer {
+.map-footer {
     pointer-events: all;
     display: block;
     height: 30px;
@@ -4224,7 +4224,7 @@ img.tile-debug {
 
 /* Footer - Flash messages
 ------------------------------------------------------- */
-#flash-wrap {
+.flash-wrap {
     display: flex;
     flex: 0 0 100%;
     flex-flow: row nowrap;
@@ -4279,7 +4279,7 @@ img.tile-debug {
     flex: 1 1 auto;
 }
 
-#footer-wrap {
+.map-footer-wrap {
     display: flex;
     flex: 0 0 100%;
     flex-flow: row nowrap;
@@ -5212,22 +5212,22 @@ svg.mouseclick use.right {
 /* dark tooltips for sidebar / panels */
 .tooltip.dark.top .popover-arrow,
 .map-pane .tooltip.top .popover-arrow,
-#sidebar .tooltip.top .popover-arrow {
+.sidebar .tooltip.top .popover-arrow {
     border-top-color: #000;
 }
 .tooltip.dark.bottom .popover-arrow,
 .map-pane .tooltip.bottom .popover-arrow,
-#sidebar .tooltip.bottom .popover-arrow {
+.sidebar .tooltip.bottom .popover-arrow {
     border-bottom-color: #000;
 }
 .tooltip.dark.left .popover-arrow,
 .map-pane .tooltip.left .popover-arrow,
-#sidebar .tooltip.left .popover-arrow {
+.sidebar .tooltip.left .popover-arrow {
     border-left-color: #000;
 }
 .tooltip.dark.right .popover-arrow,
 .map-pane .tooltip.right .popover-arrow,
-#sidebar .tooltip.right .popover-arrow {
+.sidebar .tooltip.right .popover-arrow {
     border-right-color: #000;
 }
 .tooltip.dark .popover-inner,
@@ -5236,15 +5236,15 @@ svg.mouseclick use.right {
 .map-pane .popover-inner,
 .map-pane .tooltip-heading,
 .map-pane .keyhint-wrap,
-#sidebar .popover-inner,
-#sidebar .tooltip-heading,
-#sidebar .keyhint-wrap {
+.sidebar .popover-inner,
+.sidebar .tooltip-heading,
+.sidebar .keyhint-wrap {
     background: #000;
     color: #ccc;
 }
 .tooltip.dark kbd,
 .map-pane .tooltip kbd,
-#sidebar .tooltip kbd {
+.sidebar .tooltip kbd {
     background-color: #666;
     border: solid 1px #444;
     border-bottom-color: #333;
diff --git a/modules/modes/save.js b/modules/modes/save.js
index ca2724440..cd642c642 100644
--- a/modules/modes/save.js
+++ b/modules/modes/save.js
@@ -57,7 +57,7 @@ export function modeSave(context) {
     function showConflicts(changeset, conflicts, origChanges) {
 
         var selection = context.container()
-            .select('#sidebar')
+            .select('.sidebar')
             .append('div')
             .attr('class','sidebar-component');
 
diff --git a/modules/ui/account.js b/modules/ui/account.js
index 51f6b1b0e..3c25fbc1e 100644
--- a/modules/ui/account.js
+++ b/modules/ui/account.js
@@ -12,21 +12,21 @@ export function uiAccount(context) {
         if (!osm) return;
 
         if (!osm.authenticated()) {
-            selection.selectAll('#userLink, #logoutLink')
+            selection.selectAll('.userLink, .logoutLink')
                 .classed('hide', true);
             return;
         }
 
         osm.userDetails(function(err, details) {
-            var userLink = selection.select('#userLink'),
-                logoutLink = selection.select('#logoutLink');
+            var userLink = selection.select('.userLink'),
+                logoutLink = selection.select('.logoutLink');
 
             userLink.html('');
             logoutLink.html('');
 
             if (err || !details) return;
 
-            selection.selectAll('#userLink, #logoutLink')
+            selection.selectAll('.userLink, .logoutLink')
                 .classed('hide', false);
 
             // Link
@@ -63,11 +63,11 @@ export function uiAccount(context) {
 
     return function(selection) {
         selection.append('li')
-            .attr('id', 'logoutLink')
+            .attr('class', 'logoutLink')
             .classed('hide', true);
 
         selection.append('li')
-            .attr('id', 'userLink')
+            .attr('class', 'userLink')
             .classed('hide', true);
 
         if (osm) {
diff --git a/modules/ui/field_help.js b/modules/ui/field_help.js
index edd3ab3ab..78eeb1158 100644
--- a/modules/ui/field_help.js
+++ b/modules/ui/field_help.js
@@ -181,7 +181,7 @@ export function uiFieldHelp(context, fieldName) {
         if (_wrap.empty()) return;
 
         // absolute position relative to the inspector, so it "floats" above the fields
-        _inspector = d3_select('#sidebar .entity-editor-pane .inspector-body');
+        _inspector = d3_select('.sidebar .entity-editor-pane .inspector-body');
         if (_inspector.empty()) return;
 
         _body = _inspector.selectAll('.field-help-body')
diff --git a/modules/ui/fields/restrictions.js b/modules/ui/fields/restrictions.js
index 0ae5ab5e4..ea1fca845 100644
--- a/modules/ui/fields/restrictions.js
+++ b/modules/ui/fields/restrictions.js
@@ -205,11 +205,11 @@ export function uiFieldRestrictions(field, context) {
 
         // Reflow warning: `utilGetDimensions` calls `getBoundingClientRect`
         // Instead of asking the restriction-container for its dimensions,
-        //  we can ask the #sidebar, which can have its dimensions cached.
+        //  we can ask the .sidebar, which can have its dimensions cached.
         // width: calc as sidebar - padding
         // height: hardcoded (from `80_app.css`)
         // var d = utilGetDimensions(selection);
-        var sdims = utilGetDimensions(d3_select('#sidebar'));
+        var sdims = utilGetDimensions(d3_select('.sidebar'));
         var d = [ sdims[0] - 50, 370 ];
         var c = geoVecScale(d, 0.5);
         var z = 22;
@@ -407,7 +407,7 @@ export function uiFieldRestrictions(field, context) {
             var xPos = -1;
 
             if (minChange) {
-                xPos = utilGetDimensions(d3_select('#sidebar'))[0];
+                xPos = utilGetDimensions(d3_select('.sidebar'))[0];
             }
 
             if (!minChange || (minChange && Math.abs(xPos - _lastXPos) >= minChange)) {
diff --git a/modules/ui/flash.js b/modules/ui/flash.js
index 3a21e66ef..ac98de11a 100644
--- a/modules/ui/flash.js
+++ b/modules/ui/flash.js
@@ -17,12 +17,14 @@ export function uiFlash() {
             _flashTimer.stop();
         }
 
-        d3_select('#footer-wrap')
-            .attr('class', 'footer-hide');
-        d3_select('#flash-wrap')
-            .attr('class', 'footer-show');
+        d3_select('.map-footer-wrap')
+            .classed('footer-hide', true)
+            .classed('footer-show', false);
+        d3_select('.flash-wrap')
+            .classed('footer-hide', false)
+            .classed('footer-show', true);
 
-        var content = d3_select('#flash-wrap').selectAll('.flash-content')
+        var content = d3_select('.flash-wrap').selectAll('.flash-content')
             .data([0]);
 
         // Enter
@@ -71,10 +73,12 @@ export function uiFlash() {
 
         _flashTimer = d3_timeout(function() {
             _flashTimer = null;
-            d3_select('#footer-wrap')
-                .attr('class', 'footer-show');
-            d3_select('#flash-wrap')
-                .attr('class', 'footer-hide');
+            d3_select('.map-footer-wrap')
+                .classed('footer-hide', false)
+                .classed('footer-show', true);
+            d3_select('.flash-wrap')
+                .classed('footer-hide', true)
+                .classed('footer-show', false);
         }, _duration);
 
         return content;
diff --git a/modules/ui/init.js b/modules/ui/init.js
index 88ceebab8..752cc99d7 100644
--- a/modules/ui/init.js
+++ b/modules/ui/init.js
@@ -97,7 +97,7 @@ export function uiInit(context) {
 
         container
             .append('div')
-            .attr('id', 'sidebar')
+            .attr('class', 'sidebar')
             .call(ui.sidebar);
 
         var content = container
@@ -108,10 +108,9 @@ export function uiInit(context) {
         // Top toolbar
         content
             .append('div')
-            .attr('id', 'bar-wrap')
+            .attr('class', 'top-toolbar-wrap')
             .append('div')
-            .attr('id', 'bar')
-            .attr('class', 'fillD')
+            .attr('class', 'top-toolbar fillD')
             .call(uiTopToolbar(context));
 
         content
@@ -180,18 +179,15 @@ export function uiInit(context) {
 
         var footer = about
             .append('div')
-            .attr('id', 'footer')
-            .attr('class', 'fillD');
+            .attr('class', 'map-footer fillD');
 
         footer
             .append('div')
-            .attr('id', 'flash-wrap')
-            .attr('class', 'footer-hide');
+            .attr('class', 'flash-wrap footer-hide');
 
         var footerWrap = footer
             .append('div')
-            .attr('id', 'footer-wrap')
-            .attr('class', 'footer-show');
+            .attr('class', 'map-footer-wrap footer-show');
 
         footerWrap
             .append('div')
@@ -428,7 +424,7 @@ export function uiInit(context) {
         // This will call `getBoundingClientRect` and trigger reflow,
         //  but the values will be cached for later use.
         var mapDimensions = utilGetDimensions(d3_select('#content'), true);
-        utilGetDimensions(d3_select('#sidebar'), true);
+        utilGetDimensions(d3_select('.sidebar'), true);
 
         if (withPan !== undefined) {
             map.redrawEnable(false);
@@ -440,8 +436,8 @@ export function uiInit(context) {
         ui.photoviewer.onMapResize();
 
         // check if header or footer have overflowed
-        ui.checkOverflow('#bar');
-        ui.checkOverflow('#footer');
+        ui.checkOverflow('.top-toolbar');
+        ui.checkOverflow('.map-footer');
 
         // Use outdated code so it works on Explorer
         var resizeWindowEvent = document.createEvent('Event');
diff --git a/modules/ui/intro/point.js b/modules/ui/intro/point.js
index e615d3f98..d1ba5f317 100644
--- a/modules/ui/intro/point.js
+++ b/modules/ui/intro/point.js
@@ -463,7 +463,7 @@ export function uiIntroPoint(context, reveal) {
         });
 
         var iconName = '#iD-icon-' + (textDirection === 'rtl' ? 'redo' : 'undo');
-        reveal('#bar button.undo-button',
+        reveal('.top-toolbar button.undo-button',
             t('intro.points.undo', { button: icon(iconName, 'pre-text') })
         );
 
diff --git a/modules/ui/intro/start_editing.js b/modules/ui/intro/start_editing.js
index d01510301..f6fc21c8d 100644
--- a/modules/ui/intro/start_editing.js
+++ b/modules/ui/intro/start_editing.js
@@ -39,7 +39,7 @@ export function uiIntroStartEditing(context, reveal) {
 
     function showSave() {
         d3_selectAll('.shaded').remove();  // in case user opened keyboard shortcuts
-        reveal('#bar button.save',
+        reveal('.top-toolbar button.save',
             t('intro.startediting.save'), {
                 buttonText: t('intro.ok'),
                 buttonCallback: function() { showStart(); }
diff --git a/modules/ui/sidebar.js b/modules/ui/sidebar.js
index a730d5aea..14d6c919d 100644
--- a/modules/ui/sidebar.js
+++ b/modules/ui/sidebar.js
@@ -43,7 +43,7 @@ export function uiSidebar(context) {
 
         var resizer = selection
             .append('div')
-            .attr('id', 'sidebar-resizer');
+            .attr('class', 'sidebar-resizer');
 
         // Set the initial width constraints
         selection
diff --git a/modules/ui/tools/modes.js b/modules/ui/tools/modes.js
index dabb0496e..c8a3cac13 100644
--- a/modules/ui/tools/modes.js
+++ b/modules/ui/tools/modes.js
@@ -130,7 +130,7 @@ export function uiToolOldDrawModes(context) {
                     .placement('bottom')
                     .html(true)
                     .title(function(d) { return uiTooltipHtml(d.description, d.key); })
-                    .scrollContainer(d3_select('#bar'))
+                    .scrollContainer(d3_select('.top-toolbar'))
                 );
 
             buttonsEnter
@@ -146,7 +146,7 @@ export function uiToolOldDrawModes(context) {
 
             // if we are adding/removing the buttons, check if toolbar has overflowed
             if (buttons.enter().size() || buttons.exit().size()) {
-                context.ui().checkOverflow('#bar', true);
+                context.ui().checkOverflow('.top-toolbar', true);
             }
 
             // update
diff --git a/modules/ui/tools/notes.js b/modules/ui/tools/notes.js
index 93557eefc..611fc3edc 100644
--- a/modules/ui/tools/notes.js
+++ b/modules/ui/tools/notes.js
@@ -107,7 +107,7 @@ export function uiToolNotes(context) {
                     .placement('bottom')
                     .html(true)
                     .title(function(d) { return uiTooltipHtml(d.description, d.key); })
-                    .scrollContainer(d3_select('#bar'))
+                    .scrollContainer(d3_select('.top-toolbar'))
                 );
 
             buttonsEnter
@@ -118,7 +118,7 @@ export function uiToolNotes(context) {
 
             // if we are adding/removing the buttons, check if toolbar has overflowed
             if (buttons.enter().size() || buttons.exit().size()) {
-                context.ui().checkOverflow('#bar', true);
+                context.ui().checkOverflow('.top-toolbar', true);
             }
 
             // update
diff --git a/modules/ui/tools/save.js b/modules/ui/tools/save.js
index 1e0c4a57a..af17a9515 100644
--- a/modules/ui/tools/save.js
+++ b/modules/ui/tools/save.js
@@ -80,7 +80,7 @@ export function uiToolSave(context) {
             .placement('bottom')
             .html(true)
             .title(uiTooltipHtml(t('save.no_changes'), key))
-            .scrollContainer(d3_select('#bar'));
+            .scrollContainer(d3_select('.top-toolbar'));
 
         button = selection
             .append('button')
diff --git a/modules/ui/tools/sidebar_toggle.js b/modules/ui/tools/sidebar_toggle.js
index 62561cdc8..e7beb3932 100644
--- a/modules/ui/tools/sidebar_toggle.js
+++ b/modules/ui/tools/sidebar_toggle.js
@@ -22,7 +22,7 @@ export function uiToolSidebarToggle(context) {
                 .placement('bottom')
                 .html(true)
                 .title(uiTooltipHtml(t('sidebar.tooltip'), t('sidebar.key')))
-                .scrollContainer(d3_select('#bar'))
+                .scrollContainer(d3_select('.top-toolbar'))
             )
             .call(svgIcon('#iD-icon-sidebar-' + (textDirection === 'rtl' ? 'right' : 'left')));
     };
diff --git a/modules/ui/tools/undo_redo.js b/modules/ui/tools/undo_redo.js
index b39ff390d..bf2464a30 100644
--- a/modules/ui/tools/undo_redo.js
+++ b/modules/ui/tools/undo_redo.js
@@ -46,7 +46,7 @@ export function uiToolUndoRedo(context) {
                     t(d.id + '.tooltip', {action: d.annotation()}) :
                     t(d.id + '.nothing'), d.cmd);
             })
-            .scrollContainer(d3_select('#bar'));
+            .scrollContainer(d3_select('.top-toolbar'));
 
         var buttons = selection.selectAll('button')
             .data(commands)
diff --git a/test/spec/ui/flash.js b/test/spec/ui/flash.js
index d19970396..9bf895a96 100644
--- a/test/spec/ui/flash.js
+++ b/test/spec/ui/flash.js
@@ -3,20 +3,20 @@ describe('iD.uiFlash', function () {
     beforeEach(function() {
         d3.select('body')
             .append('div')
-            .attr('id', 'flash-wrap')
+            .attr('class', 'flash-wrap')
             .append('div')
-            .attr('id', 'footer-wrap');
+            .attr('class', 'map-footer-wrap');
     });
 
     afterEach(function() {
-        d3.select('#flash-wrap')
+        d3.select('.flash-wrap')
             .remove();
     });
 
     it('flash is shown', function() {
         iD.uiFlash().duration(200)();
-        var flashWrap = d3.selectAll('#flash-wrap');
-        var footerWrap = d3.selectAll('#footer-wrap');
+        var flashWrap = d3.selectAll('.flash-wrap');
+        var footerWrap = d3.selectAll('.map-footer-wrap');
         expect(flashWrap.classed('footer-show')).to.be.ok;
         expect(footerWrap.classed('footer-hide')).to.be.ok;
     });
@@ -25,8 +25,8 @@ describe('iD.uiFlash', function () {
         iD.uiFlash().duration(200)();
         window.setTimeout(function() {
             d3.timerFlush();
-            var flashWrap = d3.selectAll('#flash-wrap');
-            var footerWrap = d3.selectAll('#footer-wrap');
+            var flashWrap = d3.selectAll('.flash-wrap');
+            var footerWrap = d3.selectAll('.map-footer-wrap');
             expect(flashWrap.classed('footer-hide')).to.be.ok;
             expect(footerWrap.classed('footer-show')).to.be.ok;
             done();