Ever have your css stop working after 4095 selectors are declared? Look no further bless is here! Here are some tools to help you squash this annoying bug.
Here is a visual aid to show how the problem works. If you’re on a Mac like me then you can install Virtual Box + Vagrant solution. Open this page in IE 9 or below. Inside the codepen scroll down to the bottom.
You’ll see the red color stop after 4095 selectors are used from the stylesheet. Easy, just make another stylesheet and add selectors until the next you hit our favorite number again.
An elegant solution to this problem is Bless. This app counts your css selectors to 4095 and creates a new stylesheet with the remainder. The other thing I like about this solution is it adds the @import to the original style.css. This worked well for me since I was working on a large site that would have required a lot of changes in order to add the additional css file.
$ npm install -g blesscssCLI Usage
Pass in a css file you would like blessed
$ blessc style.css
-xat the end as an argument will minify your code for example
$ blessc style.css -x
--no-cleanupat the end as an argument will prune old styles and update css file appropriately for example
$ blessc style.css --no-cleanup
$ npm install gulp-bless
Here is what I did to add the Bless gulp plugin to my build. First I included
var bless = require('gulp-bless'); at the top to initiate the plugin in my gulpfile file. Then I added
.pipe(bless()).pipe(gulp.dest('./splitCSS')); to my css build task and that is it. Pretty simple and only takes a few minutes to install. Hope you find this helpful.