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

osgood_  wrote

Edited

Fontawesome, another popular icon library - 33kb

Its starting to add up - max 20kb is unrealistic in my opinion in todays development world if you want to deliver a good user experience.

20kb for css and javascript is possible provided you know what you are doing.

If someone is going to use off-the-shelf items then they will have large downloads, and may as well use a framework such as bootstrap.

Edit: Don't forget i am talking about just the css and javascript. I am not talking about any content, such as written, images or videos. Those additional items are extra, but my point is that keeping the css and javascript file sizes small, allows the developer to include more or higher quality content, and still keep the overall download for the page down.


pziecina  wrote

If someone is going to use off-the-shelf items then they will have large downloads, and may as well use a framework such as bootstrap.

Doesnt that acount for the majority of the web if you take into account off-the-shelf Frameworks, CMS's, Slideshows, Carousels, Navigation, Icon Libraries etc? Most will be using at least one and a lot maybe all.

BBC news website css is 37kb, no js or other supporting files accounted for.

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