clean up messy CSS

[elenac4971182]

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

[pziecina]

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]

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]

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

[pziecina]

Creating from scratch and using bootstrap would not reduce the amount of css.

The size of the bootstrap files has caused a number of disagreements in the forum, but the simple fact is, if you want to use bootstrap then excessive extra css is something you will have to live with.

[elenac4971182]

Thank you for answering my questions pziecina, I appreciate it.

Still I don't know what to do now.... I need the website to be responsive.

(Maybe I'd better open another thread.)

[pziecina]

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.

[osgood_]

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.

[pziecina]

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.

[osgood_]

pziecina  wrote

in Dw it is the simplest and easiest method for rwd sites.

ignorance is bliss

[Nancy OShea · Accepted solution]

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

[elenac4971182]

Hi Nancy, thanks!! Your suggestions sound really useful

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

[elenac4971182]

[Nancy OShea]

That looks like one recording (scan) of one page only.  So don't be mislead by results.  You will need to examine each page in the site to ensure you're not removing critical styles & scripts.

Good luck!

Nancy

[elenac4971182]

@Nancy

You are right, it's just a single page scan. But still it is surprising...

Thank you for your suggestions (and for the good luck greeting!)

@Paula

I have always written my own html and css (no js), keeping it simple and straightfull. That's why I feel so unconfortable putting my hands on somebody else's code that is soo huge and full of instructions that are overwritten by other instructions...

On the other hand I'm self-taught and I'm worried I would not be good enough to start from scratch a responsive website. Some suggestions on good tutorials? (not too basic, not too advanced...)

[pziecina]

Although this one starts with site set-up, later in the series it does go on to building an rwd site -

https://helpx.adobe.com/dreamweaver/how-to/make-website-pt1-site-setup.html

[pziecina]

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.

[osgood_]

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]

You have actually answered your own point, in that keeping supporting file sizes down allows the developer to increase the content file sizes, and keep the total within an acceptable limit for the end user.

If someone sets a limit of 2mb for everything, then keeping the css and javascript to below 20kb allows for the content to be 1.98mb. If however the css and javascript is a combined total of 200kb then that drops to 1.8mb, and lets be honest 180kb allows for things like hi-dpi image delivery, or even a short video.

[osgood_]

pziecina  wrote

You have actually answered your own point, in that keeping supporting file sizes down allows the developer to increase the content file sizes, and keep the total within an acceptable limit for the end user.

If someone sets a limit of 2mb for everything, then keeping the css and javascript to below 20kb allows for the content to be 1.98mb. If however the css and javascript is a combined total of 200kb then that drops to 1.8mb, and lets be honest 180kb allows for things like hi-dpi image delivery, or even a short video.

I think your probably wishing on a star - the jQuery library minified is 90k alone. I don't come across many sites these days that arent linked to the jQuery library in some way.

I just looked at some Wordpress theme css - minified - 111k, that's without including all the js files.

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.

[pziecina]

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.

[osgood_]

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]

I cannot find the article from MS about usage by developers, but in it they did mention that the type of site the developer creates, or works on (small buisness, to large corporate) is a good indicator of if they will use a framework, etc. With the small buisness site developer normally using much more 3rd party open-source material than the large corporate developer.

Probably not surprising though, as the small business site developer (self-employed or small local firm) is much more interested in client turnaround time, and cash flow, than the corporate developer recieving a guaranteed monthly pay cheque.

[osgood_]

pziecina  wrote

I cannot find the article from MS about usage by developers, but in it they did mention that the type of site the developer creates, or works on (small buisness, to large corporate) is a good indicator of if they will use a framework, etc. With the small buisness site developer normally using much more 3rd party open-source material than the large corporate developer.

Probably not surprising though, as the small business site developer (self-employed or small local firm) is much more interested in client turnaround time, and cash flow, than the corporate developer recieving a guaranteed monthly pay cheque.

I hear what you are saying but hey if you took all the aircrafts seats out and said no luggage then the journey time cound be cut by around 10mins but who the hell wants to save 10mins for an uncomfortable 2.50hr trip instead of a 3hr comfortable trip and no change of clothes.

[pziecina]

To take your aircraft seat idea one step further, people pay extra for buisness class and even more for first class. They do that because it gives them a higher quality of seating, extras and service than the normal tourist class does.

If they paid for that extra comfort and quality, and only recieved the standard tourist class of service, they would look elswhere, and that is the difference between a high quality custom site and one that is bog standard. Yes the bog standard site that uses mass production code and features and may look very good, but it works and feels like every other site.

It all depends on the type of client and end user one is catering for.