Strict style rules

di-add.scss

// sites/di/ad.css

@import 'mixins';
@import 'styleguide';

.ad {
  display: none;
  margin: 0 auto;
  position: relative;
  text-align: center;
  z-index: $ad-layer;

  @include only(medium) {
    margin-top: 4px;
  }

  // hide ads when printing
  @media print {
    display: none;
  }

  // remove z-index in edit mode:
  // this allows component selectors to display properly
  &.ad_editMode {
    z-index: 0;
  }

  // out of page ad
  &.ad_oop {
    height: 0;
    left: 0;
    position: absolute;
    top: 0;
  }

  // 'bordered' ads only have a border on mobile
  &.ad_bordered {
    @include only(small) {
      border-bottom: 1px solid $ad-border;
      border-top: 1px solid $ad-border;
      margin: 10px 0 20px;
      padding: 5px 0;
    }
  }

  // set min-height for different sizes
  &[data-sizes*='300x1050'] {
    min-height: 1050px;
  }

  &[data-sizes*='300x600'] {
    margin-bottom: 30px;
    min-height: 600px;
  }

  &[data-sizes*='970x251'] {
    min-height: 251px;
  }

  &[data-sizes*='300x250'],
  &[data-sizes*='300x252'] {
    min-height: 250px;

    @media screen and (max-width: 340px) {
      margin-left: calc((300px - 100vw) / 2);
    }
  }

  &[data-sizes*='610x190'] {
    min-height: 190px;
  }

  &[data-sizes*='612x168'] {
    min-height: 168px;
  }

  &[data-sizes*='280x115'] {
    min-height: 115px;
  }

  &[data-sizes*='320x100'] {
    min-height: 100px;
  }

  &[data-sizes*='1024x91'],
  &[data-sizes*='970x91'],
  &[data-sizes*='728x91'] {
    min-height: 91px;
  }

  &[data-sizes*='1024x90'],
  &[data-sizes*='970x90'],
  &[data-sizes*='728x90'] {
    min-height: 90px;
  }

  &[data-sizes*='495x80'] {
    min-height: 80px;
  }

  &[data-sizes*='970x66'] {
    min-height: 66px;
  }

  &[data-sizes*='495x63'],
  &[data-sizes*='280x63'] {
    min-height: 63px;
  }

  &[data-sizes*='980x60'],
  &[data-sizes*='480x60'],
  &[data-sizes*='468x60'],
  &[data-sizes*='260x60'] {
    min-height: 60px;
  }

  &[data-sizes*='320x50'],
  &[data-sizes*='300x50'] {
    min-height: 50px;
  }

  &[data-sizes*='1024x'] {
    min-width: 1024px;
  }

  &[data-sizes*='980x'] {
    min-width: 980px;
  }

  &[data-sizes*='970x'] {
    min-width: 970px;
  }

  &[data-sizes*='728x'] {
    min-width: 728px;
  }

  &[data-sizes*='612x'] {
    min-width: 612px;
  }

  &[data-sizes*='610x'] {
    min-width: 610px;
  }

  &[data-sizes*='495x'] {
    min-width: 495px;
  }

  &[data-sizes*='480x'] {
    min-width: 480px;
  }

  &[data-sizes*='468x'] {
    min-width: 468px;
  }

  &[data-sizes*='320x'] {
    min-width: 320px;
  }

  &[data-sizes*='300x'] {
    min-width: 300px;
  }

  &[data-sizes*='280x'] {
    min-width: 280px;
  }

  &[data-sizes*='260x'] {
    min-width: 260px;
  }

  &[data-label*='DesktopBanner'] {
    border-bottom: 1px solid $ad-border-dark;
    border-top: 1px solid $ad-border-dark;
    margin-bottom: 30px;
    margin-left: -150px;
    margin-top: 30px;
    min-width: 970px;
    padding-top: 10px;

    &:before {
      color: $ad-border-dark;
      content: 'Story continued below';
      display: block;
      font-family: Georgia, serif;
      font-size: 12px;
      font-style: italic;
      text-align: center;
    }

    [width$='970'] {
      margin: 10px 0 20px;
    }

    [width$='728'] {
      margin: 10px 0 20px;
    }
  }

  &[data-label*='BottomLeaderboard'] {
    clear: both;
    margin: 0 auto 30px;
    padding: 5px 0;
    text-align: center;
    width: 100%;
  }

  &[data-label*='MidBanner'],
  &[data-label*='colMobile'] {
    margin-bottom: 30px;
  }

  &[data-label*='inArticle'] {
    margin-bottom: 25px;

    &:before {
      color: $dark-grey;
      content: 'Story continued below';
      display: block;
      font-family: Georgia, serif;
      font-size: 12px;
      font-style: italic;
      margin-bottom: 7px;
      text-align: center;
    }
  }

  &[data-label*='premiumDesktop'],
  &[data-label*='outStreamDesktop'],
  &[data-label*='outStreamMobile'] {
    height: 1px;
    overflow: hidden;
    user-select: none;
  }

  &[data-label*='Desktop300x250'] {
    float: right;
    left: 150px;
    margin-left: -115px;
  }

  &[data-cb-ad-id*='TopLeaderboard'] {
    background: $ad-background;

    @include min(668) {
      background: none;
    }
  }

  &[data-label*=inSplash] {
    border-bottom: 1px solid $ad-splash-border;
    border-top: 1px solid $ad-splash-border;
    margin-bottom: 30px;
    padding: 10px 0;

    &:before {
      // Hide the "Article continued below" for dynamically added ads in splash pages
      display: none;
    }
  }

  // Define the visibility based on view port
  // The class name is vp-(min or 0)-(max or plus)
  // Examples: .vp-0-600, .vp-600-800, .vp-800-plus
  &.ad_vp-0-plus {
    display: block;
  }

  &.ad_vp-0-480 {
    @media screen and (max-width: 479.9px) {
      display: block;
    }
  }

  &.ad_vp-0-600 {
    @media screen and (max-width: 599.9px) {
      display: block;
    }
  }

  // some older instances of mobile landscape ads use this
  &.ad_vp-480-667 {
    @media screen and (max-width: 666.9px) {
      display: block;
    }
  }

  &.ad_vp-480-728 {
    @media screen and (min-width: 480px) and (max-width: 727.9px) {
      display: block;
    }
  }

  &.ad_vp-600-1024 {
    @media screen and (min-width: 600px) and (max-width: 1023.9px) {
      display: block;
    }
  }

  &.ad_vp-728-1024 {
    @media screen and (min-width: 728px) and (max-width: 1023.9px) {
      display: block;
    }
  }

  &.ad_vp-1024-plus {
    @media screen and (min-width: 1024px) {
      display: block;
    }
  }

  & > div,
  & > iframe {
    margin: 0 auto;
  }

  .layout-tertiary &[data-sizes*='300x250'] {
    margin-bottom: 20px; // Add bottom margin to ad when its in tertiary so it doesn't bump against masthead
  }
}

One rule might be added to the class naming syntax: numbers may be separated from things by hyphens (e.g. .ad_vp-1024-plus) rather than camelCased (e.g. .ad_vp1024Plus)