Using some code I found in an OOTB page layout I have found an easy way to add styles for when the page is in edit mode. This is neccesary if you want to change how fields and controls are laid out when you know the zones will be visible.

Without proper edit mode styling, the content managers user experience can bottom out. We must remember to keep in mind these are important users of the site, sometimes we tend to only think of the end user.

First step, add the PublishingWebControls registration tag to the top of the master page.

<%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

Next add an editmodepanel control with css registration inside of it. Load it after your main css so it outwieghts any base styles you have added.

<PublishingWebControls:EditModePanel runat="server" id="editmodestyles">
  <!-- Styles for edit mode only-->
  <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/sample/css/edit-mode.css %>"
   After="<% $SPUrl:~sitecollection/Style Library/sample/css/sample.css %>" runat="server"/>
 </PublishingWebControls:EditModePanel>

Finally create the edit-mode.css and place it in your style library. The following is just a few starter styles for cleaning up some of the common controls.

.ms-rtestate-field {
 padding:4px;
}
.ms-formfieldlabelcontainer, .edit-mode-panel-label {
 padding:4px; 
}
.ms-formfieldvaluecontainer, .edit-mode-panel {
 border: 2px dashed #CCCCCC;
 padding:4px; 
}
.ms-SPZone {
 border: 2px dashed #CCCCCC;
}
.ms-SPZone:hover {
 border: 2px dashed #b3dfe5;
}
.ms-WPAddButton {
 border: 2px dashed #CCCCCC; 
}
.ms-WPAddButton:hover {
 border: 2px dashed #b3dfe5 ;
}
.ms-SPZoneTitle, .ms-formfieldlabelcontainer, .edit-mode-panel-label {
 color:#CCCCCC;

}