How to Remove Unused Styles from Twitter Bootstrap

How to remove unused styles from twitter bootstrap?

Are you more concerned about the impact of the file size on the loading time for your users? Or want to make it easier for you to read/understand the CSS if it's shorter?

Either way, I suggest you don't spend too much time worrying about removing every single extra CSS style. Uncheck the elements of Bootstrap that you don't plan on using and download the customized version. For the live/production version of your site, use a minimized version of the CSS which will further reduce the file size.

If you just want to keep the code more simple for your use, that's definitely understandable but the Bootstrap team has done a great job of organizing it. Spend a little time with it.

Consider that trying to completely remove all span* references will remove functionality that you might use like controlling the width of form fields. These can be very useful, even if you're not using the grid.

How To Remove unused CSS rules

You can customise the components that are compiled at http://getbootstrap.com/customize/.
This way you will have a smaller outputted file but all dependencies will be met.

To get even finer control you can use the source .less files to compile only the components you want.

Remove unused CSS classes from frameworks like bootstrap in a react project

As djfdev already wrote purgecss works quite well: purgcss simply searches all JavaScript files for occurrences of the CSS class strings of the used CSS files and removes those which cannot be found.

Compiling Svelte 3.38.2 and unused Bootstrap 5 SCSS

Svelte's unused style removal happens at the component level. It analyzes the selectors used in your component's <style> tag and removes anything not present in your component's markup. Because of this, if you wanted it to remove unused Bootstrap selectors, you would need to import the Bootstrap SCSS into every component so that the compiler could analyze which selectors are being used in that component. Due to Bootstrap's size, this is not recommended. It will massively slow down your build time, since the compiler has to analyze all of Bootstrap's styles for every component. Also, you would end up with duplicated Bootstrap styles across components.

Because of that, I recommend adding Bootstrap to your global SCSS and following Bootstrap's documentation on removing unused styles.



Related Topics



Leave a reply



Submit