Highlighted

Delete unused css

Explorer ,
Aug 01, 2020

Copy link to clipboard

Copied

Good morning, I have a website consisting of a few hundred pages and during the construction I created styles that I didn't use. I would like to know if there is a way to check which styles or selectors are not used (external stylesheet)? Thanks Augusto

 

Moving to Dreamweaver based on user history https://community.adobe.com/t5/user/viewprofilepage/user-id/6433414

Topics

How to

Views

81

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Delete unused css

Explorer ,
Aug 01, 2020

Copy link to clipboard

Copied

Good morning, I have a website consisting of a few hundred pages and during the construction I created styles that I didn't use. I would like to know if there is a way to check which styles or selectors are not used (external stylesheet)? Thanks Augusto

 

Moving to Dreamweaver based on user history https://community.adobe.com/t5/user/viewprofilepage/user-id/6433414

Topics

How to

Views

82

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Aug 01, 2020

Copy link to clipboard

Copied

And what Adobe program are you asking about?
You have posted in the forum for getting help Using this particular forum system.

Need to know the name of the actual Adobe program you are using so your post can be moved to that forum.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Aug 01, 2020

Copy link to clipboard

Copied

Dust-Me Selectors is a browser add-on for Firefox and Opera that scans your web page to find unused CSS selectors.

http://www.brothercake.com/dustmeselectors/

 

JitBit is an online tool that crawls your site (up to 200 pages deep).

https://www.jitbit.com/unusedcss/

 

PurifyCSS is an online tool that removes unused CSS and provides you with new minified stylesheets.

https://purifycss.online/

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Aug 01, 2020

Copy link to clipboard

Copied

Thanks for the reply.

I apologize for not having specified that the program I use is Dreamweaver.

August

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Aug 03, 2020

Copy link to clipboard

Copied

DW doesn't currently have a tool for cleaning out unused CSS.

Your best option will be one of the tools Nancy points to.

One thing to note, at least some of the tools can't read javascripts that are being used to change styles in the page. If you have javascripts handling styles in your site, make sure you don't remove those styles if they come up as "unused" in the tools.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Aug 03, 2020

Copy link to clipboard

Copied

Good point!  Always test BEFORE you commit to removing styles. 

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Paul-M LATEST
Adobe Community Professional ,
Aug 03, 2020

Copy link to clipboard

Copied

You can do this with PurceCSS and node, it creates new cleaned copies of your stylesheets and doesn't touch your existing css files

//Install the latest versionof Node

// Install purgecss with node using the following command:

 

npm install purgecss

 

/Open a command prompt form inside your project folder (in windows hold down shift + right click and select powershell from within your project folder)
// In this example command you scan all css files in 'stylesheets' directory and check against all php/html files  in root and all js files in scripts folder - cleaned css files are saved to 'cssout' directory:

 

purgecss --css stylesheets/*.css --content *.php,*.html, scripts/*.js' --output cssout

 

For the record I don't think any of theses kind of tools are 100% perfect...


Paul-M, ACP - www.webspectrum.co.uk

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...