Sass: Overcoming the challenge of the IE limitation on 4095 selectors per stylesheet

Question

Sass: Overcoming the challenge of the IE limitation on 4095 selectors per stylesheet

Hey there! Are you working on a Rails project with Sass & Compass? If you're using the Rails Asset Pipeline, check out this question.

We're in the process of developing a large application with multiple use cases and various individually styled pages, catering to different contexts. This means we have a lot of style information to manage.

In our latest project section, we've encountered Internet Explorer's limit of 4095 selectors per stylesheet. Need proof of this limitation? Check out this link.

Now, why not just split the application stylesheet into several smaller ones by design?

The issue is that mixins and selector inheritance won't work across multiple Sass files (not partials), correct?

While the quality of our stylesheets is high, we can't eliminate the excess number of selectors. And it doesn't seem like reducing the amount of selectors should be our top optimization priority. The Sass core team recommends using selector inheritance over mixins when possible to reduce CSS file size, even though it may result in an increase in the number of selectors.

So, what are my options?

I'm considering writing a script that generates additional CSS files, breaking down the main application.css file. These extra files would only be loaded in IE to avoid multiple requests in modern browsers. I'd need a basic CSS parser to divide the application.css file after reaching 4095 selectors at a valid point. And I'd also require a Compass compile-after hook so developers don't need to manually create the IE files for testing purposes.

If you have any better ideas, please share them!

Thanks, Christian

ruby-on-rails css internet-explorer sass compass-sass

Answer 1

Answer №1

Using mixins across multiple files is a common practice, but it's not feasible for @extend to work in the same way. The purpose of @extend is to create a single rule that shouldn't be duplicated across different files, so splitting files isn't an option.

To address this issue, I developed a splitter which can be found here: https://gist.github.com/1131536

Following the integration of these changes into Sass and Compass through this pull request and this one, you can automate the creation of additional stylesheets for IE by adding the following hook to your Rails config/compass.rb:

on_stylesheet_saved do |filename|
  if File.exists?(filename)
    CssSplitter.split(filename)
  end
end

Update:

The aforementioned CssSplitter has now been released as a gem, which can be accessed here: https://github.com/zweilove/css_splitter

Answer 2

Using mixins across multiple files is a common practice, but it's not feasible for @extend to work in the same way. The purpose of @extend is to create a single rule that shouldn't be duplicated across different files, so splitting files isn't an option.

To address this issue, I developed a splitter which can be found here: https://gist.github.com/1131536

Following the integration of these changes into Sass and Compass through this pull request and this one, you can automate the creation of additional stylesheets for IE by adding the following hook to your Rails config/compass.rb:

on_stylesheet_saved do |filename|
  if File.exists?(filename)
    CssSplitter.split(filename)
  end
end

Update:

The aforementioned CssSplitter has now been released as a gem, which can be accessed here: https://github.com/zweilove/css_splitter

Answer 3

Answer №2

In situations where it is not feasible to decrease the amount of selectors being used, dividing the CSS file appears to be the only viable option.

It seems like your plan for accomplishing this is on the right track, even though it may require some complexity in execution.

Answer 4

In situations where it is not feasible to decrease the amount of selectors being used, dividing the CSS file appears to be the only viable option.

It seems like your plan for accomplishing this is on the right track, even though it may require some complexity in execution.

Answer 5

Answer №3

If you're looking for a simple solution, check out . Here is how to make it work:

First, download and install node.js
Next, run npm install bless -g in your terminal
Finally, use the command blessc source.css output.css

Answer 6

If you're looking for a simple solution, check out . Here is how to make it work:

First, download and install node.js
Next, run npm install bless -g in your terminal
Finally, use the command blessc source.css output.css

Sass: Overcoming the challenge of the IE limitation on 4095 selectors per stylesheet

Answer №1

Answer №2

Answer №3

Similar questions

Enhance the dimensions of images on Tumblr

How to perfectly align content on a webpage

Changing the image source when clicking on it and removing it can be done by using JavaScript

Tips for aligning a div containing an image in the center of another div

Having trouble getting transitionProperty to work in the style object of your ReactJS CSS?

Does Internet Explorer 10 support the FormData object?

Aligning the text in the middle of a button

What is the best approach for scaling @material-ui Skeleton in a grid row with variable heights?

Troubleshooting issue: Chrome bug causing JavaScript full height intro section to have incorrect padding and display issues

Issues with border/padding and overlay in Packery Grid Layout

Aligning text and lists using Bootstrap on both desktop and mobile devices

How to add icons to HTML select options using Angular

ERB failing to interpret Ruby script

Hover Effects for CSS Info Boxes

How can you transfer data from a jQuery function to a designated div element?

What advantages and disadvantages come with choosing between using vh and vw for responsive text?

Returning to a page that has been scrolled down and contains dynamic content loaded via ajax

Steps to eliminate the select all checkbox from mui data grid header

Steps for Adding a class or Id to an Ext.Msg.alert box

Modifying button appearance upon clicking using JavaScript