IE8 ignores rules with too many selectors

Question

I have a SASS generated CSS file where I use (sass) @extend to extend various bootstrap classes.

In some instances, this results in styling rules that have a large number of selectors. For example:

#bb .col-xs-1,
#bb .amend .summary-wrapper .summary .summary-item .col-price,
#bb .amend .summary-wrapper .summary-head .summary-item .col-price,
#bb .col-xs-2,
#bb .check-items .summary-wrapper .summary .summary-item .col-edit,
#bb .amend .summary-wrapper .summary .summary-item .col-date,
#bb .amend .summary-wrapper .summary-head .summary-item .col-date,
#bb .col-xs-3,
#bb .check-items .summary-wrapper .summary .summary-item .col-label,
#bb .checkout .summary-wrapper .summary .summary-item .col-label,
#bb .amend .summary-wrapper .summary .summary-item .col-data,
#bb .amend .summary-wrapper .summary-head .summary-item .col-data,
#bb .amend .summary-wrapper .summary .summary-item .col-location,
#bb .amend .summary-wrapper .summary-head .summary-item .col-location,
#bb .amend .summary-wrapper .summary .summary-item .col-edit,
#bb .amend .summary-wrapper .summary-head .summary-item .col-edit,
#bb .col-xs-4,
#bb .day-nav .day-nav-left,
#bb .day-nav .day-nav-title,
#bb .day-nav .day-nav-right,
#bb .col-xs-5,
#bb .col-xs-6,
#bb .col-xs-7,
#bb .check-items .summary-wrapper .summary .summary-item .col-data,
#bb .col-xs-8,
#bb .col-xs-9,
#bb .checkout .summary-wrapper .summary .summary-item .col-data,
#bb .col-xs-10,
#bb .col-xs-11,
#bb .col-xs-12,
#bb .col-sm-1,
#bb .col-sm-2,
#bb .bb-list-item .bb-action,
#bb .week-nav .week-nav-left,
#bb .week-nav .week-nav-right,
#bb .service-list .filters .filter-col,
#bb .col-sm-3, #bb .bb-label,
#bb .field.field-sml,
#bb .field.field-select,
#bb .field.field-big + .messages,
#bb .booking-questions .form-group.child:nth-child(even) .field,
#bb .col-sm-4,
#bb .field,
#bb .field + .messages,
#bb .field.field-sml + .messages,
#bb .bb-big-picker .left,
#bb .checkout .summary-wrapper .booking-options,
#bb .schedule-beauty .date-select .date-picker,
#bb .schedule-beauty .date-select .date-nav,
#bb .schedule-beauty .treatments .treatment.third,
#bb .amend .summary-wrapper .booking-options,
#bb .col-sm-5,
#bb .bb-store-block,
#bb .bb-label.bb-label-big,
#bb .booking-questions .form-group.child:nth-child(even) .bb-label,
#bb .col-sm-6,
#bb .category-container .category .category-content,
#bb .category-container .category .category-image,
#bb .field.field-big,
#bb .booking-questions .form-group.child:nth-child(odd) .bb-label,
#bb .booking-questions .form-group.child:nth-child(odd) .field,
#bb .check-items .summary-wrapper .summary,
#bb .check-items .summary-wrapper .summary-notes,
#bb .schedule-beauty .treatments .treatment.half,
#bb .col-sm-7, #bb .bb-map-wrapper,
#bb .col-sm-8,
#bb .bb-list-item .bb-txt,
#bb .bb-big-picker .right,
#bb .week-nav .week-nav-title,
#bb .checkout .summary-wrapper .summary,
#bb .col-sm-9, #bb .field.field-huge,
#bb .submit-col,
#bb .info-box-field-wrapper,
#bb .col-sm-10,
#bb .col-sm-11,
#bb .col-sm-12,
#bb .bb-list-item .bb-txt-big,
#bb .bb-store-block .stores .store,
#bb .bb-question-heading,
#bb .amend .summary-wrapper .summary,
#bb .amend .summary-wrapper .summary-head,
#bb .col-md-1, #bb .col-md-2,
#bb .col-md-3,
#bb .col-md-4,
#bb .col-md-5,
#bb .col-md-6,
#bb .col-md-7,
#bb .col-md-8,
#bb .col-md-9,
#bb .col-md-10,
#bb .col-md-11,
#bb .col-md-12,
#bb .col-lg-1,
#bb .col-lg-2,
#bb .col-lg-3,
#bb .col-lg-4,
#bb .col-lg-5,
#bb .col-lg-6,
#bb .col-lg-7,
#bb .col-lg-8,
#bb .col-lg-9,
#bb .col-lg-10,
#bb .col-lg-11,
#bb .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

In my testing, it appears that IE8 ignores this rule. I'm aware of the 4095 rule limit in IE8, but after running blesscss, this doesn't seem to be issue as it reports that I only have a total of 2,904 rules. It seems like IE is ignoring the rule because there are so many selectors associated to it.

Is there a workaround for this issue? Or should I consider a different approach?

Answer 1

IE8 ignores any CSS declarations that include non-supported selectors. In this case, it looks like it's probably failing on the :nth-child() selectors.

To get around this, I'd probably set those styles up in a mixin that you include in a placeholder, then extend that placeholder anywhere you need to, but in the cases that you need to apply the styles to a :nth-child, include the mixin rather than extend the placeholder. For example:

@mixin mystyles {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

%styled {
  @include mystyles;
}

.goodSelector {
  @extend %styled;
}

.formGroup:nth-child(even) {
  @include mystyles;
}