--> How To Clean Up A CSS Stylesheet? | Experience Lab - Online business creation and development guide for bloggers and startups

How To Clean Up A CSS Stylesheet?

Often over the course of time, you need to make small tweaks to your website. Most of these tweaks are usually visual, and involve workin...


Unused CSS


Often over the course of time, you need to make small tweaks to your website. Most of these tweaks are usually visual, and involve working with CSS files. Over time, CSS files grow and may accumulate redundant or overlapping CSS rules that are old and no longer used, or are overwritten by new styles. Some styles might be leftovers from a plugin or an on-page element that you no longer use. These useless styles can increase the size of your CSS files, hence compromise the load speed. Let's take a look at how you can clean out your CSS files.

CSS styles can be;


  • Redundant, for instance, you might have set the body background color twice and never noticed it.

  • Overwritten, i.e. two separate values for a single CSS property, such as two different colors for the body background. In this case, the browser only picks out one style, making the other(s) useless.

  • No longer in use. You might have added a subscription widget and added custom CSS for it. But you later decided that it doesn't look good, and hence took off the widget entirely. The CSS for this widget still remains behind, no longer in use.




How to remove unused CSS?




Not only do these unused entries increase CSS file size and the page load time of your website, they also affect the site’s performance as the browser has to process extra data. Not to mention that useless CSS styles make the task of maintaining CSS files that much harder due to all the redundancy.




A popular browser extension, called Dust Me is used for just such a purpose. It scans your webpage, and lists all the unused CSS rules in the stylesheet. Firefox and Opera users need to install this plugin, but fortunately for its users, Google Chrome has built-in developer tools which you can use to remove redundant CSS.


  • While a webpage is open inside Google Chrome, click on File >> Tools >> Developer Tools. Alternative keyboard shortcuts are Ctrl+Shift+I, or simply F12.

  • Inside the debugger, look for the Audits tab.

  • Inside the Audits tab, click on the radio button that says Reload Page and Audit on Load. Now click on Run.

  • The audit process should now run.



Audit


  • One the audit is complete, expand the "Remove Unused CSS Rules" group, and then further expand the CSS files that are located on your site. Not all CSS rules come from your website's CSS - some comes from third-party plugin sources.




You will now get a sorted list of all the styles that were not used by the browser.






CSS Audit




You can simply copy these results off the audits page, and save them for use. Cross-check them against your CSS file and see if they really are useless. Sometimes, some CSS rules aren't used on some pages, but are on others. Hence, not every rule can be eliminated this way. You will need to manually check before deleting each entry. We recommend auditing multiple pages before making a decision.

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,4,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,3,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: How To Clean Up A CSS Stylesheet?
How To Clean Up A CSS Stylesheet?
http://1.bp.blogspot.com/-oTHXpVRGU70/U_Od12hv-9I/AAAAAAAAGNU/HI6lVamkFks/s1600/unused%2BCSS.jpg
http://1.bp.blogspot.com/-oTHXpVRGU70/U_Od12hv-9I/AAAAAAAAGNU/HI6lVamkFks/s72-c/unused%2BCSS.jpg
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2014/08/how-to-clean-up-css-stylesheet.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2014/08/how-to-clean-up-css-stylesheet.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy