Skip to main content
elenac4971182
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
elenac4971182Author
Known Participant
July 27, 2017

O
osgood_
Legend
July 28, 2017

Your screen shot illustrates a common problem in web development now, in that the file sizes are constantly getting larger.

I would consider 10-20kb as a maximum combined total for css and javascript files, but for many developers who do not write their own javascript and use jQuery, the jQuery file itself would break that limit, (30kb). Once someone uses an open-source framework the total file size is with very few exceptions over 200kb.

The developer themselves must decide on just how big none content files can be, based on what they think users will find acceptable. If the developer gets it wrong users will not use the site after an initial visit.

I think most developers will agree that in general writting your own code will always result in smaller file sizes, but doing so will take more time.


pziecina  wrote

but for many developers who do not write their own javascript and use jQuery, the jQuery file itself would break that limit, (30kb).

That's just the size of a smallish image, so might as well get rid of all images as well and just have text, isn't that how it all started?

Fine line is if the wesbite is visual boring and uniniviting visitors aren't going to come back anyway, so yes, you can keep all your file sizes small and risk the possiblity of losing visitors or you can keep them bigger and risk the possibility of losing visitors.

I just toss a coin.

pziecina
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
elenac4971182Author
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)

elenac4971182
elenac4971182Author
Known Participant
July 27, 2017

(Template is 'Be Theme' from BeantownThemes -HTML responsive multi-purpose template)

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices