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)

pziecina
Legend
July 27, 2017

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.


Even though i do not like telling people to use bootstrap, in Dw it is the simplest and easiest method for rwd sites.

I have looked at doing a couple of tutorials for using flexbox and css grid layouts, and doing so for a number of layout types using just one html file, but a number of essential features are completely missing from Dw, and without them i would have to tell users to use another program then reopen the css file in Dw.

One of the items that i found laughably, was that i would need to tell user to go back to using pencil and paper for the working out of the initial css grid layout flow. A feature for which Dw is certainly not alone in not having.

I also have the same problem with posting css animation demos, along with the explanations of why and how. With the demise of flash, and many thinking it is o/k to use Animate, Dw is loosing out in my opinion.