Skip to main content
elenac4971182
Known Participant
July 27, 2017
Answered

clean up messy CSS

  • July 27, 2017
  • 2 replies
  • 5409 views

Hi, I just downloaded CC 2017. I'm wondering if there is an automated way to clean a messy css, deleting tags that are not used and things like that.

I'm trying to put order in a website that I did non create myself (I inherited it from someone who modified a template bought on internet) with bootstrap jquery etc. There is much more code than it is needed, and I'm looking for a tool like 'Tools > Clean Up HTML' that works for css.

Thank you for your help
Elena

This topic has been closed for replies.
Correct answer Nancy OShea

As Paula said, DW has no tool for identifying unused CSS.  But the browsers do.

Chrome has a new developer tool that may help.

Using the new CSS Coverage Tool - Chrome DevTools - Dev Tips

Dust-Me Selectors is a browser add-on you might try.  Available for Firefox or Opera.

[brothercake] Dust-Me Selectors

When using Bootstrap a lot of extra CSS & JS can be eliminated if the site is created with a custom build.  For example, if you know that Carousels and Forms will never be used, you can exclude those from the build and download a custom or Lite version.

http://getbootstrap.com/customize/

Nancy

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
July 27, 2017

As Paula said, DW has no tool for identifying unused CSS.  But the browsers do.

Chrome has a new developer tool that may help.

Using the new CSS Coverage Tool - Chrome DevTools - Dev Tips

Dust-Me Selectors is a browser add-on you might try.  Available for Firefox or Opera.

[brothercake] Dust-Me Selectors

When using Bootstrap a lot of extra CSS & JS can be eliminated if the site is created with a custom build.  For example, if you know that Carousels and Forms will never be used, you can exclude those from the build and download a custom or Lite version.

http://getbootstrap.com/customize/

Nancy

Nancy O'Shea— Product User & Community Expert
elenac4971182
Known Participant
July 27, 2017

Hi Nancy, thanks!! Your suggestions sound really useful

Now i know what to study. Have a bright day!!

pziecina
Legend
July 27, 2017

There is no such function in Dw.

Be very carefull with the bootstrap css files, as even though most of it may not be used, you should not edit the bootstrap file in any way unless you know exactly what you are doing.

elenac4971182
Known Participant
July 27, 2017

Thank you pziecina, that was quick!

Unfortunatelly I don't really understand bootstrap css as you correctly guessed... that's why I was hoping in DW's help.

What I know is that there are 22K lines of css code with same information overwritten many times!!

Any workarounds or suggestions? Should I recreate the website from scratch? (including bootstrap)

Legend
July 27, 2017

Although I will argue that bootstrap should not be used to the other regular forum contributors. I will agree that using it for the none expert coder is a viable option for creating a responsive site.

If you are good with code, then I personally would recommend taking a look at using css flexbox.


pziecina  wrote

I will agree that using it for the none expert coder is a viable option for creating a responsive site.

That's its core user aint it? The unsuspecting ones, using bloated code, generally terrible html mark up and a lot of nonsense class names littered here there and everywhere, making maintenance extremely unpleasant.

Personally I'd rather be coding than searching Google for Bootstrap class names or solutions to simple problems, after all that is my job.