Putting Your CSS Framework On A Diet
I’ve worked on a couple of projects now that use Bootstrap. I like Bootstrap for prototyping; it’s quick and easy. However, I don’t care for the weight, especially in public-facing projects. Analyzing one Bootstrap project that I’m putting on a diet has a final stylesheet of 150k and over 3,000 unused classes (ouch).
Mobile users and users in rural areas with poor internet connections may be clients and customers. Getting user’s content delivered fast is crucial if you want to stay competitive. I believe speed is king, and a couple of tools I’ve started investigating to speed up the projects are…
PurifyCSS and UnCSS, both of these tools are used with a task runner like gulp or grunt; their basic mission is to strip out all unused classes. I’m not real clear about the dynamic classes yet. I guess this is another reason to prefix classes tied to JavaScript with “js-” or hey target the data-” attribute instead. Regardless I’m hoping one of these will slim the CSS down.